jquery 拨动开关仅工作一次且不关闭

Question

I'm new to js and jquery, I'm trying to open and close some menu, and it does open on first click but it is not closing after I click again.

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

another weird thing is that if I click before the 1 second toggle end, it does work and closing

                <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>

Answer 1

I'd suggest going through the jQuery docs once. Also, the code above will throw an error as the .click(function(){ is incomplete. I'd also suggest using .on instead.

 $(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>

Answer 2

Ok, you might have to shed more details on what you want to achieve. I see that you are basing it on a checkbox? May I ask why? Probably not the best way to handle click event on a container with a clickable item inside. I'd suggest binding to the checkbox or using a button instead. But anyway, you might have to use slideUp and SlideDown instead and check that the checkbox is checked. With the code below, it will remember how many click you've done and show/hide menu that many times. You can add another check and disable click until the animation is completed.

 $(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>