Question

我是响应式设计的新手，我正在尝试使用媒体查询。我正在尝试使用媒体查询使我的导航栏响应。问题是当我在移动视图中调整页面大小时，导航栏会显示SPAN标记，但是一旦单击它就应该下拉菜单列表。我试图在这个过程中使用jQuery。我的代码如下：

HTML CODE

<span class="menu-trigger">MENU </span>
<nav class = "nav-main">          
  <ul>
    <li>
      <a href = "#" class = "nav-item"> HOME</a>                              
    </li>
    <li>
      <a href = "#" class = "nav-item">ABOUT US </a>
    </li>
    <li>
      <a href = "#" class = "nav-item">PORTFOLIO </a>
    </li>
    <li>
      <a href = "#" class = "nav-item">SERVICES </a>
    </li>
    <li>
      <a href = "#" class = "nav-item">CONTACT US </a>
    </li>
  </ul>
</nav>

CSS代码

.nav-main {
    width:100%;
    background-color: #222;
    height:70px;
    color:#fff;
}

@media screen and (max-width: 480px){    
    .menu-trigger{
        display:block;   
    }    
    .nav-main > ul > li{
        float:none;
        border-bottom: 2px solid #d5dce4
    }
    .nav-main {
        display:none;   
    }       
    .nav-main > ul > li:last-child{ 
        border-bottom: none;
    }         
}

JQUERY CODE

<script type ="text/javascript">
    jQuery(".menu-trigger").click(function(){
        jQuery(".nav-main").slideToggle();
    });
</script>

现在当进入移动尺寸时，内容nav-main确实消失并且仅显示SPAN但是当点击SPAN时它应该具有切换效果，在导航栏中显示列表的其余部分但似乎没有发生。

更新--- JSFIDDLE - https://jsfiddle.net/k4ytvyef/

Answer 1

如果没有看到脚本的位置，我只能假设您可能已将jquery代码放在html元素之上。

在jsbin上尝试这个，当jquery选择器能够在加载后找到元素时，你的代码就可以工作。

要在不将代码移动到页面底部的情况下实现此目的，您可以使用jquery的ready事件包装脚本，如下所示：

jQuery( document ).ready(function() {
   jQuery(".menu-trigger").click(function(){
        jQuery(".nav-main").slideToggle();

    });
});

编辑：

上面的评论询问为什么它对jsfiddle不起作用：

JQuery不是原生的javascript。为了在任何测试环境中使用它，您需要添加jquery库，以便它可以与您的代码一起运行。

响应设计没有响应

1 个答案: