0

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

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

});

我很感激这方面的任何帮助。

4

3 回答 3

0

不幸的是，以上答案都不适合我。不久之后我找到了解决方案。

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();阻止页面上下跳跃。

于 2012-07-30T13:14:46.090 回答
0

为什么要单独关闭/打开菜单项？当父<li>元素被隐藏时，一切都会被隐藏——为什么在那之后还要做什么？

我想你想禁用事件冒泡。

编辑1：你把事情复杂化了。尝试这个：

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

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

$(document).ready(function () {
    $('a.someLink').click(function() {
       $('.dropdown').toggle();
    });
});
于 2012-07-29T21:52:26.847 回答
0

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

<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);        
        }
    );
});​
于 2012-07-29T21:58:18.647 回答