Question

我正在练习jQuery。我想创建一个简单的导航栏，例如Bootstrap导航栏。我想要一个汉堡包菜单在移动设备和一个正常的＆＃34;桌面上的菜单，但我被阻止了。

我不知道如何使用h1右侧的内联列表项设置普通菜单。我尝试在jQuery上添加这样的内容：if ($(window).width <= 860) {，但它不起作用。

JSFiddle：https://jsfiddle.net/l_wel/kzLs5jou/

编辑：由于您建议使用CSS媒体查询，我解决了这个问题。

＆＃13;

$(function () {
  $('ul').hide();
  $('span#toggleMenu').on('click', function (e) {
    $('ul').slideToggle();
  });
});

＆＃13;

.container {
  margin: 0 auto;
  width: 75%;
}

h1 {
  float: left;
}

span {
  float: right;
  cursor: pointer;
  margin-top: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
  text-align: center;
}

li {
  margin-bottom: 20px;
  font-size: 1.5em;
}

＆＃13;

<body>
  <header class="container">
    <h1>Toggle Navbar</h1>
    <nav id="navbar">
      <span id="toggleMenu"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png" alt="menu"></span>
      <ul>
        <li class="item">Item1</li>
        <li class="item">Item2</li>
        <li class="item">Item3</li>
        <li class="item">Item4</li>
        <li class="item">Item5</li>
      </ul>
    </nav>
  </header>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

＆＃13;

Answer 1

你与if ($(window).width <= 860)关系密切。请注意，width是一种方法，而不是属性，因此它需要括号：

if($(window).width() <= 860) {
  $('span#toggleMenu').hide();
}

更好的方法是使用 media queries ：

<style>
  @media (max-width: 860px) {
    span#toggleMenu {
      display: none;
    }
  }
</style>

Answer 2

以下代码适用于我：

if(window.innerWidth <= 860) {

}

Answer 3

您可以使用媒体查询处理使用css的nav更改，然后您只需在按钮点击时切换ul。

$('span#toggleMenu').on('click', function(e) {
  $('ul').slideToggle();
});

.container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 75%;
}
#toggleMenu {
  display: none;
}
span {
  float: right;
  cursor: pointer;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
  text-align: center;
}

li {
  font-size: 1.5em;
}

@media(max-width: 768px) {
   #toggleMenu {
     display: block;
   }
   ul {
     display: none;
   }
   nav {
     position: relative;
   }
   ul {
     position: absolute;
     left: 50%;
     top: 100%;
     transform: translateX(-50%);
   }
}
@media(min-width: 768px) {
  ul {
    display: flex !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container">
  <h1>Toggle Navbar</h1>
  <nav id="navbar">
    <span id="toggleMenu"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png" alt="menu"></span>
    <ul>
      <li class="item">Item1</li>
      <li class="item">Item2</li>
      <li class="item">Item3</li>
      <li class="item">Item4</li>
      <li class="item">Item5</li>
    </ul>
  </nav>
</header>

如何使用jQuery在桌面上隐藏汉堡包菜单？

3 个答案: