下拉菜单的jQuery切换功能遇到问题

Question

I have a dropdown menu that slides up and down when toggled to reveal it's menu items. The problem is that when i go to click one of the menu items after the menu has slid down, it is recognized as a toggle and the menu slides up without opening the link of the menu item.

HTML

<li class="dropdown">
            <a href="#">Carbohydrates, proteins &amp; fats</a>
            <ul>
                <li><a href="carbohydrates.php">Carbohydrates</a></li>
                <li><a href="proteins.php">Proteins</a></li>
                <li><a href="fats.php">Fats</a></li>
            </ul>
        </li>

dropdown script:

$(document).ready(function () {
    $('.dropdown').toggle(
        function () {
            //show its submenu
            $('ul', this).slideDown(300);
        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(300);        
        }
    );

});

I'd appreciate any help with this.

Answer 1

Why are you individually closing/opening the menu items? Everything gets hidden anyway when the parent <li> element is hidden -- why do anything after that?

I think you want to disable event bubbling .

---

EDIT 1: You're over-complicating things. Try this:

$(document).ready(function () {
    $('.dropdown').toggle();
});

---

EDIT 2: Can you be more specific about what you want? If you want a particular element, when clicked, to control the motion of a particular list, try this:

$(document).ready(function () {
    $('a.someLink').click(function() {
       $('.dropdown').toggle();
    });
});

Answer 2

Try moving the triggering link outside of the dropdown items

<a href="#" class="dropdown">Carbohydrates, proteins &amp; fats</a>
<div class="divdropdown">
   <ul>
       <li><a href="carbohydrates.php">Carbohydrates</a></li>
       <li><a href="proteins.php">Proteins</a></li>
       <li><a href="fats.php">Fats</a></li>
   </ul>
</div>​

And then slightly modify your jquery

$(document).ready(function () {
    $('.dropdown').toggle(
        function () {
            //show its submenu
            $('ul', $(".divdropdown")).slideDown(300);
        },
        function () {
            //hide its submenu
            $('ul', $(".divdropdown")).slideUp(300);        
        }
    );
});​

Answer 3

Unfortunately none of the above answers were working for me. I found a solution shortly afterwards.

HTML

<li class="dropdown">
            <a class="disablelink" href="#">Carbohydrates, proteins &amp; fats</a>
            <ul class="sub_navigation">
                <li><a href="carbohydrates.php">Carbohydrates</a></li>
                <li><a href="proteins.php">Proteins</a></li>
                <li><a href="fats.php">Fats</a></li>
            </ul>
        </li>

jquery script

$(document).ready(function() {
        $('.dropdown').click(function() {
                        // When the event is triggered, grab the current element 'this' and
                        // find it's children '.sub_navigation' and display/hide them
            $(this).find('.sub_navigation').slideToggle(); 
        });

        $(".disablelink").click(function(e) {
            e.preventDefault();
        });

    });

That solution is working perfectly for me. I added in e.preventDefault(); to stop the page jumping up and down when i clicked on the link.