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

show/ hide ul for mobile device in responsive website

本文关键字：移动 ul 隐藏 响应 网站 显示      更新时间：2023-09-26

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

<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(); }
);
            });

当您只需要一个函数时，.click（）方法中有两个函数：

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

演示示例

文档：http://api.jquery.com/click/

相关文章：