jquery slideToggle 到达高度时弹跳

Question

我正在尝试制作一个下拉菜单。问题是，当它向下滑动时，一旦它到达正在向下滑动的列表的高度，它就会立即再次向上滑动。

JavaScript

$(document).ready(function(){

                $(".Mobile-Menu").click(function(){

                $(".Mobile-list").slideToggle("slow");

                });
            });

HTML

<div class="Mobile-Menu">
 <img class="Mobile-Menu" src="menu.png">
 <ul class="Mobile-list">
  <a Id="Mobile-Home" href="#Home-Anchor"><li>Home</li></a>
  <a Id="Mobile-What" href="#What-Anchor"><li>What Is Encryption?</li></a>
  <a Id="Mobile-Test" href="#Test-Anchor"><li>Test It Yourself</li></a>
  <a Id="Mobile-How" href="#How-Anchor"><li>How Does It Work</li></a>
 </ul>
</div>

CSS

.Mobile-Menu {

    display: block;

    position: fixed;

    top: -3px;

    left: 10px;

    z-index: 75;

    width: 100px;

}


.Mobile-list {

    position: fixed;

            display: none;

    top: 90px;

    left: 20px;

    text-align: left;

    background-color: #1b2021;

    font-size: 22pt;

            padding: 2px;

}

如果有人能解释一下为什么它会“反弹”那么我将非常感激!

Answer 1

由于您有多个嵌套的 Mobile-Menu 类元素，点击事件会在 DOM 中冒泡并被多次触发。使用 .stopPropagation() 停止:

$(document).ready(function () {
    $(".Mobile-Menu").click(function (e) {
        e.stopPropagation();
        $(".Mobile-list").slideToggle("slow");
    });
});

jsFiddle example

或者，只需从 div 中删除 Mobile-Menu 类并将其保留在图像上: jsFiddle example