如何更改提供的jQuery以正确切换菜单？

Question

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

<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"); 
     } 
    }); 
}); 

Answer 1

我会用:hidden检查菜单是否隐藏/可见的，那么你需要在CSS中$.css()用引号分开。

$(document).ready(function() { 
 

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

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

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

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

 
    } else { 
 

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

 
});

#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; 
 
}

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

Answer 2

的问题是你必须在你的代码中的错别字（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"); 
    } 
    }); 
}); 

Answer 3

你的代码是好的u有一些语法错误

$(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(); 
 
    * 
 
    */ 
 
    
 
    }); 
 

 
});

#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; 
 
}

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

Answer 4

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

使用纯JavaScript：

document.getElementById("nav-icon").onclick = function(){ 
 
this.classList.toggle('show-nav-list'); 
 
}

#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; 
 
}

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

或使用jQuery：

$(function(){ 
 
$('#nav-icon').click(function(){ 
 
$("#nav-list").toggleClass("show-nav-list") 
 
}) 
 
})

/* 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; 
 
}

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