在响应网站中显示/隐藏移动设备的ul

Question

我正在网站上和移动设备上工作，我希望它在单击图像时显示和隐藏导航

<div class="mobile_header">
<div class="tab">
            <a id="tab" href="#">
                <img src="images/tab_btn.jpg" height="70" alt="logo" /></a></div>
              <div style="clear:both;"></div>  
            <ul>
            <li><a href="#" class="first">About</a></li>

            <li><a href="#">Services</a></li>

            <li ><a href="#">contact</a></li>
</ul>
</div></div>

这是我的CSS

.tab{ float:right; width:40px; height:40px; padding:20px;}

.tab img{ width:40px; height:40px;}

.mobile_header 
{
    color: #fff;
    width: 100%;

    position: fixed;
    top: 0px;
    left: 0px;
    background: #000;
    font-family: 'oswaldbook';
    border: 1px solid #323232;
    z-index: 111;
    text-align: left;
}

.mobile_header ul
{
    margin:0px;
    display:none;
    padding: 0;
    position: relative;
    width: 100%;
}

.mobile_header ul li
{
    display: block;
    position: relative;
    text-align:center;
    width:100%;
    margin:0px;
    padding:0px;
    padding-top:10px;
}

这是js

   $("#tab").click(
function () { $(".mobile_header ul").fadeIn(700);  });

        });

我想要的是切换.mobile_header ul，但无法正常工作

    $(function () {
                $(".tab").click(
function () { $(".mobile_header ul").slideToggle(500); },
function () { $(".mobile_header ul").hide(); }
);
            });

Answer 1

仅需要一个时，.click（）方法中就有两个函数：

$(function() {
  $(".tab").click(
    function() {
      $(".mobile_header ul").slideToggle(500);
    }
  );
});

演示示例

文件： http ： //api.jquery.com/click/