javascript - 响应式设计没有响应

Question

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

HTML 代码

<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 代码

<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 的就绪事件包装脚本，如下所示:

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

    });
});

编辑:

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

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