下拉菜單的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>

下拉腳本：

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

});

我將不勝感激。

Answer 1

為什么要分別關閉/打開菜單項？ 父<li>元素被隱藏后，所有內容都會被隱藏起來-為什么之后還要做什么？

我想你想禁用事件冒泡 。

---

編輯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(); 當我單擊鏈接時，停止頁面上下跳動。