jQuery下拉菜单无法正常工作

时间：2017-01-22 18:48:05

标签： javascript jquery html css dropdown

所以我尝试制作一个移动菜单，一切都很顺利，但是当我点击它时，它会将我发送到页面顶部而不是下拉菜单。 CDN已正确链接（使用jQuery警报检查），因此它的锚标记错误或jQuery代码。你能检查一下吗？

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#i-nav').click(function() {
    $('ul').toggleClass('show');
  });
});
＆＃13; 
html,
body {
  min-width: 320px;
  min-height: 320px;
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: #f1f1f1;
}
.show {
  display: block;
}
.testnav ul {
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  margin-right: 50px;
}
.testnav ul li {
  display: inline;
  float: left;
  width: auto;
  height: 100px;
}
.testnav ul li a {
  line-height: 100px;
  display: block;
  float: left;
  padding: 0 20px;
  color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
  color: white;
  border-bottom: 5px solid #b0b0b0;
}
#home:hover {
  background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
  background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
  background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
  background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
  background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
  float: left;
  z-index: 101;
  line-height: 100px;
  text-align: center;
  display: none;
}
#logo {
  float: left;
  margin-left: 50px;
  margin-top: 15px;
}
a {
  text-decoration: none;
  text-transform: uppercase;
}
.floatright-wrapper {
  float: right;
}
.testnav {
  width: 100%;
  height: 100px;
  background: white;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .floatright-wrapper {
    float: none;
  }
  .testnav ul {
    width: 100%;
    text-align: center;
    margin: 0;
    display: none;
  }
  .testnav ul li {
    width: 100%;
  }
  .testnav ul li a {
    width: 100%;
    text-align: center;
    outline: solid white 1px;
  }
  #logo {
    margin: 10px;
  }
  #i-nav {
    float: right;
    margin-right: 40px;
    display: block;
    font-size: 30px;
    color: black;
  }
}
@media screen and (max-width: 400px) {
  #logo {
    width: 50%;
    margin-top: 27px;
  }
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
  <img src="css/images/logo.png" alt="logo" id="logo">
  <a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
  <nav>
    <ul>
      <div class="floatright-wrapper">
        <li><a href="#" target="_top" id="home">Home</a></li>
        <li><a href="#" target="#text-boxes" id="menu2">Menu2</a></li>
        <li><a href="#" target="picture-boxes-section" id="menu3">Menu3</a></li>
        <li><a href="#" id="menu4">Menu4</a></li>
        <li><a href="#" id="menu5">Menu5</a></li>
      </div>
    </ul>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

页面跳到顶端，因为当您点击链接时，它认为这是您要采取的操作。为了防止尝试编辑你的功能，就像我在下面。 .preventDefault函数告诉浏览器您不希望它尝试转到不同的页面，就像锚标记一样。

$('#i-nav').click(function(e) {
    e.preventDefault();
    $('ul').toggleClass('show');
});

修改

您的菜单未显示的原因是您要将show类添加到页面上的每个ul。尝试具体而且像$('.test-nav ul').toggleClass('show');

如果您仍然没有看到该菜单，这很可能是因为之前使用display: none的CSS会覆盖您的节目类display: block您可以通过将其更改为{来解决此问题{1}}或者您可以明确地给display: block !important一个类或ul，然后在您的jQuery中使用它。

以下是我所谈论的一个例子。如果您有几个嵌套的div，如下所示：

id

用css这样：

<div class="first">
    <div class="second"></div>
</div>

第一个将始终覆盖第二个。

答案 1 :(得分：0)

只需要在代码中添加一个简单的东西，它就会开始运作良好。只需添加！对您的班级重要。显示。查看我的代码以供参考。

$(document).ready(function() {
  $('#i-nav').click(function() {
    $('ul').toggleClass('show');
  });
});
html,
body {
  min-width: 320px;
  min-height: 320px;
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: #f1f1f1;
}
.show {
  display: block !important;
}
.testnav ul {
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  margin-right: 50px;
}
.testnav ul li {
  display: inline;
  float: left;
  width: auto;
  height: 100px;
}
.testnav ul li a {
  line-height: 100px;
  display: block;
  float: left;
  padding: 0 20px;
  color: #626262;
}
#home:hover,
#menu2:hover,
#menu3:hover,
#menu4:hover,
#menu5:hover {
  color: white;
  border-bottom: 5px solid #b0b0b0;
}
#home:hover {
  background-color: rgba(223, 187, 66, 0.65);
}
#menu2:hover {
  background-color: rgba(196, 52, 52, 0.65);
}
#menu3:hover {
  background-color: rgba(80, 139, 97, 0.65);
}
#menu4:hover {
  background-color: rgba(89, 148, 160, 0.65);
}
#menu5:hover {
  background-color: rgba(87, 95, 189, 0.65);
}
#i-nav {
  float: left;
  z-index: 101;
  line-height: 100px;
  text-align: center;
  display: none;
}
#logo {
  float: left;
  margin-left: 50px;
  margin-top: 15px;
}
a {
  text-decoration: none;
  text-transform: uppercase;
}
.floatright-wrapper {
  float: right;
}
.testnav {
  width: 100%;
  height: 100px;
  background: white;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .floatright-wrapper {
    float: none;
  }
  .testnav ul {
    width: 100%;
    text-align: center;
    margin: 0;
    display: none;
  }
  .testnav ul li {
    width: 100%;
  }
  .testnav ul li a {
    width: 100%;
    text-align: center;
    outline: solid white 1px;
  }
  #logo {
    margin: 10px;
  }
  #i-nav {
    float: right;
    margin-right: 40px;
    display: block;
    font-size: 30px;
    color: black;
  }
}
@media screen and (max-width: 400px) {
  #logo {
    width: 50%;
    margin-top: 27px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testnav" id="menu">
  <img src="css/images/logo.png" alt="logo" id="logo">
  <a href="#" id="i-nav"><i class="fa fa-bars icon-2x" aria-hidden="true"></i>
</a>
  <nav>
    <ul>
      <div class="floatright-wrapper">
        <li><a href="#" target="_top" id="home">Home</a></li>
        <li><a href="#" target="#text-boxes" id="menu2">Menu2</a></li>
        <li><a href="#" target="picture-boxes-section" id="menu3">Menu3</a></li>
        <li><a href="#" id="menu4">Menu4</a></li>
        <li><a href="#" id="menu5">Menu5</a></li>
      </div>
    </ul>
  </nav>
</div>

相关问题
最新问题