如何正确地将提供的jQuery更改为切换菜单？

时间：2017-06-19 02:59:06

标签： javascript jquery html css nav

我显示了一个汉堡包菜单图标，并希望它有一个下拉菜单，如下所示：

<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="about" href="#about">about</a></li>
    <li><a id="work" href="#work">work</a></li>
    <li><a id="contact" href="#contact">contact</a></li>
  </ul>
</div>

此菜单的显示设置为“无”。下面是我用来显示导航列表的jQuery。我希望它在单击时显示，并在再次单击时消失（切换）。为什么这不起作用？需要做出哪些调整？ jsfiddle here 

$(document).ready(function() {
    var n = $("#nav-list");

    $("#nav-icon").click(function() {
        if (n.css("display, none")) {
            n.css("display, block");
        } else {
            n.css("display, none");
        }
    });
});

4 个答案:

答案 0 :(得分：1)

我会使用:hidden检查菜单是否隐藏/可见，然后您需要将$.css()中的CSS与引号分开。

＆＃13;
＆＃13; 
$(document).ready(function() {

  var $n = $("#nav-list");

  $("#nav-icon").click(function() {

    if ($n.is(':hidden')) {

      $n.css("display","block");

    } else {

      $n.css("display","none");
    }
  });

});
＆＃13; 
#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

问题在于代码中的拼写错误（https://codepen.io/anon/pen/rwyNqM）：

$(document).ready(function() {
  var n = $("#nav-list");
  $("#nav-icon").click(function() {
    // This is how we check the current display value.
    if (n.css("display") === "none") {
      // First parameter and second parameter should be in quotes.
      n.css("display", "block");
    } else {
      n.css("display", "none");
    }
  });
});

答案 2 :(得分：0)

你的代码很好你有很少的语法错误

＆＃13;
＆＃13; 
$(document).ready(function() {

  var n = $("#nav-list");

  $("#nav-icon").click(function() {
    if (n.css("display") == "none") {
      n.css("display","block");
    } else {
      n.css("display","none");
    }
    
    /*
    * n.slideToggle();
    * n.toggle(); 
    * n.fadeToggle();
    *
    */
   
  });

});
＆＃13; 
#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

使用切换类更简单，只需通过CSS即可应用一些效果。看看这2个选项：

使用纯javascript：

＆＃13;
＆＃13; 
document.getElementById("nav-icon").onclick = function(){
this.classList.toggle('show-nav-list');
}
＆＃13; 
#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display:none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}


.show-nav-list #nav-list {
  display:block !important;
}
＆＃13; 
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list" >
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

或使用Jquery：

＆＃13;
＆＃13; 
$(function(){
$('#nav-icon').click(function(){
$("#nav-list").toggleClass("show-nav-list")
})
})
＆＃13; 
/* Check last line of this CSS, i add .show-nav-list  class CSS*/

#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}

.show-nav-list {
  display:block !important;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题