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

Question

我有一个下拉菜单，当切换显示它的菜单项时，它会上下滑动。问题是，当我在菜单向下滑动后单击其中一个菜单项时，它被识别为切换，并且菜单向上滑动，而没有打开菜单项的链接。

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脚本：

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

});

如果能帮上忙我将不胜感激。

Answer 1

不幸的是，上面的答案对我来说都不起作用。不久之后，我找到了一个解决方案。

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脚本

$(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();
        });

    });

这个解决方案对我来说非常有效。我添加了e.preventDefault();来阻止页面在我点击链接时上下跳跃。

Answer 2

为什么要单独关闭/打开菜单项？无论如何，当父<li>元素被隐藏时，所有内容都会被隐藏--为什么还要在那之后做任何事情呢？

我认为你想要disable event bubbling。

编辑1:你把事情搞得太复杂了。试试这个：

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

编辑2:你能更具体地说明你想要什么吗？如果您希望在单击某个特定元素时控制特定列表的运动，请尝试执行以下操作：

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

Answer 3

尝试将触发链接移动到下拉项之外

<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>​

然后稍微修改一下jquery

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