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

Jquery slideToggle在达到高度时弹跳

1 个答案: