Problem with Return false in Javascript

Asked

Viewed 757 times

0

I need to develop an accordion menu and am having problems with the click event. My script:

$(document).ready(function(){
    $('.dropdown').click(
        function(){
            $(this).find("ul").slideToggle();
            return false;
        }
    );
});

Slidetoggle calls an unordered list that sits inside an LI element. It works perfectly, but the list links stop redirecting. When I click on any of them, the slideToggle() simply undoes, the menu returns to the original state and I am not redirected. Where I am missing?

javascript jquery

  • Could you include a demo of the menu structure? I believe it may be a problem regarding the propagation of the click.

  • Enter this as part of the HTML of your question

  • @Pedrovinícius, could also include the element with class dropdown? I think it helps to discover the problem :)

  • @Wakim, the menu code is automatically generated by WP. But if you can take a look at the source code on the site, follow the link: http://conscienciaestelar.filosofiaesoterica.com.br It is the menu on the left that is with this problem :/

  • 1

    @Pedrovinícius, ok, I’ll take a look

3 answers

2

The error occurs precisely by return false;, that does not let the event started on the submenu link finish running.

Include the following code right after the registration of handler to the click in the dropdown:

$('.sub-menu a').click(function(e) { e.stopPropagation(); });

In giving stopPropagation at the click of the link, you will prevent the event from spreading upwards, and then you will not block the navigation event.

And by clicking on the link, the user will be redirected to the page.

1

In there is a function called .preventDefault() which "denies" the original event of a tag HTML, this way you can use it so that your links do not have their original effect as soon as they are clicked

$(document).ready(function(){
    $('.dropdown').click(
        function(event){
            event.preventDefault();
            $(this).find("ul").slideToggle();
        }
    );
});

  • Thanks for answering friend. But I’ve tried with this function too. The effect is the same :-/

0

Let’s imagine that your HTML is like this:

<ul>
    <li class="dropdown">
        <a href="">Abrir drop down A</a>
        <ul>
            <li><a href="">Link A 1</a></li>
            <li><a href="">Link A 2</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="">Abrir drop down B</a>
        <ul>
            <li><a href="">Link B 1</a></li>
            <li><a href="">Link B 2</a></li>
        </ul>
    </li>
</ul>

And your script is applying the click to the element .dropdown when the correct is to apply the click to the child link directly from the element .dropdown.

So your jQuery.click should look like this:

$(document).ready(function(){
    $('.dropdown >a').click(function(){
       $(this).siblings("ul").slideToggle();
       return false;
    });
});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.