如何通过单击按钮使手风琴菜单打开？

Question

单击“更多”按钮时，我想打开一个手风琴菜单。 我已经尝试过，但是它显示的是手风琴处于第一状态，当我单击按钮时它会折叠。 我想要的是单击按钮打开风琴，并首先关闭它。

请指导我

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu">
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
        $('#hide').click(
                function() {
                    //show its submenu
                    $("#rightMenu").stop().slideToggle(500);
                }
        );
    });
</script>

Answer 1

您可以将其添加到ready

$("#rightMenu").hide();

或将其CSS样式设置为display:none

Answer 2

您只需要调用$（“＃rightMenu”）。hide（）...或使用CSS隐藏它

看到这个codepen： http ://codepen.io/nathamanath/pen/bwJKn

Answer 3

设置display:none css中display:none

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu" style="display:none;">
<!--------------------^-------^--------->   
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
    $('#hide').click(
            function() {
                //show its submenu
                $("#rightMenu").stop().slideToggle(500);
            }
       );
  });
</script>

小提琴

或者您也可以在dom准备就绪时使用jquery隐藏它，使用hide()方法

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu">
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
    $("#rightMenu").hide();
    $('#hide').click(
            function() {
                //show its submenu
                $("#rightMenu").stop().slideToggle(500);
            }
       );
  });
</script>

小提琴

Answer 4

首先使其slideToggle 。

检查这个小提琴

$('#rightMenu').stop().slideToggle(500);
$('#hide').click(
    function () {
        //show its submenu
        $("#rightMenu").stop().slideToggle(500);    
    }
);

而且，我什至不知道完整的JQuery，但是您可以在Google上找到简单的知识。