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

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

FIDDLE

或者你可以在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>

FIDDLE

Answer 4

在开头设为slideToggle。

Check this fiddle

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

而且，我甚至不知道完整的 JQuery，，但您可以在 Google.

上找到它的简单知识

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

4 个答案: