jquery 切换只工作一次并且不会关闭答案

【问题标题】：jquery toggle is working only one time and not closing backjquery 切换只工作一次并且不会关闭
【发布时间】：2021-04-25 09:32:52
【问题描述】：

我是 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 toggle onload jquery-click-event

【解决方案1】：

我建议浏览 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>

【讨论】：

感谢您的帮助！我将其更改为“打开”，但在第二次点击时仍然无法正常工作。另一个奇怪的事情是，如果我在 1 秒切换结束之前单击，它确实可以工作并关闭
您可能需要为您正在做的事情创建一个 sn-p。干杯
我添加了 sn-p，我添加了 stopPropogation，否则它总是在 1 次点击后打开和关闭

【解决方案2】：

好的，您可能需要详细说明您想要实现的目标。我看到你是基于一个复选框？我可以问为什么吗？可能不是处理内部带有可点击项目的容器上的点击事件的最佳方式。我建议绑定到复选框或使用按钮。但无论如何，您可能必须改用 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>

【讨论】：