jquery toggle 只工作一次并且没有关闭

问题描述

我是 js 和 jquery 的新手， 我正在尝试打开和关闭某个菜单，它在第一次点击时打开，但在我再次点击后没有关闭。

    $(document).ready(function(){
        $("#toggle-menu").click(function(){
        $("#btn").toggle(1000);
    });

另一件奇怪的事情是，如果我在 1 秒切换结束前单击，它会起作用并关闭

                <div id="toggle-menu" ">
                    <input type="checkBox" id="check">
                    <label for="check" onclick="event.stopPropagation();">
                        <i class="fa fa-bars fa-2x i_dynm" aria-hidden="true"></i>
                    </label>
                </div>

                <div id="btn">
                    <li id="btnli">
                        <button>
                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                            something
                        </button>
                    </li>
                    <li><button class="mb">something</button></li>
                    <li>
                        <button>
                            <i class="fa fa-question-circle" aria-hidden="true"></i>something else
                        </button>
                    </li>
                </div>

解决方法

我建议浏览一次 jQuery 文档。此外，由于 .click(function(){ 不完整，上面的代码将引发错误。我还建议改用 .on。

$(document).ready(function(){
    $("#toggle-menu").on('click',function(){
          $("#btn").toggle(1000);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle-menu">
  Toggle
</button>
<button id="btn">
  Button
</button>

,

好的，您可能需要详细说明您想要实现的目标。我看到你是基于一个复选框？我可以问为什么吗？可能不是处理内部具有可点击项目的容器上的点击事件的最佳方式。我建议绑定到复选框或使用按钮代替。但无论如何，您可能必须改用 slideUp 和 SlideDown 并检查复选框是否已选中。使用下面的代码，它会记住您已经完成了多少次点击并多次显示/隐藏菜单。您可以添加另一个检查并禁用单击，直到动画完成。

$(document).ready(function(){
   $("#toggle-menu").click(function(){
        var isChecked = $("#check").is(":checked");
     if(isChecked){
       $("#btn").slideDown(1000);
     }else{
       $("#btn").slideUp(1000);
     }
   });
 });

#btn{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle-menu">
                    <input type="checkbox" id="check">
                    <label for="check" onclick="event.stopPropagation();">
                        <i class="fa fa-bars fa-2x i_dynm" aria-hidden="true"></i>
                    </label>
                </div>

                <div id="btn">
                    <li id="btnli">
                        <button>
                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                            something
                        </button>
                    </li>
                    <li><button class="mb">something</button></li>
                    <li>
                        <button>
                            <i class="fa fa-question-circle" aria-hidden="true"></i>something else
                        </button>
                    </li>
                </div>