移动导航隐藏/显示一个按钮

Mobile Navigation hide/show one button

本文关键字：一个 按钮 导航 隐藏 显示 移动      更新时间：2023-09-26

嗨，我有导航显示和隐藏的基础上点击按钮。我知道我可以在隐藏div中添加一个按钮来关闭它。然而，我想有相同的按钮显示和隐藏相同的div。任何想法?我试着反转#hide和#show，但它会隐藏原来的。

小提琴:http://jsfiddle.net/6xtd8/1/

    <div id="mobnavz"><a id="show">MENU</a>
</div> 
    <div class="target" style="display:none;" id="hide">
        <div id="mobnav">
         <ul>
                <li>Home Security</li>
                <li>Home Automation</li>
                <li>Business Security</li>
                <li>Business Automation</li>
            </ul>
</div>
</div>
     $(document).ready(function () {
         // This hides the Nav
         $("#hide").click(function () {
             $(".target").hide("slide", {
                 direction: "up"
             }, 500);
             $('#show').show();
             $('#hide').hide();
         });
         // This shows nav when button is clicked.
         $("#show").click(function () {
             $(".target").show("slide", {
                 direction: "up"
             }, 500);
             $('#show').hide();
             $('#hide').show();
         });
         // This animated the toggle.
         if ($('.target').is(':visible')) {}
     });

如果我没理解错的话…您希望在单击同一按钮时打开和关闭一个部门。试试这个:

 $(document).ready(function () {
     $("#show").click(function () {
         $("#hide").slideToggle(500);           
     });
     // This animated the toggle.
     if ($('.target').is(':visible')) {}
 });
相关文章：