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>

下拉脚本：

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

});

我很感激任何帮助。

Answer 1

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

我想你想要disable event bubbling。

编辑1：你的事情过于复杂。试试这个：

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

编辑2：你能更具体地了解你想要什么吗？如果您想要一个特定元素，单击时，要控制特定列表的运动，请尝试以下操作：

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

Answer 2

尝试在下拉项目之外移动触发链接

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

Answer 3

不幸的是，上述答案都没有对我有用。不久之后我找到了一个解决方案。

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();中添加了当我点击链接时停止页面上下跳动。

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

3 个答案: