如何使下拉菜单
问题描述：
我在internet上找到这个下拉菜单。问题是下拉总是打开，它不工作。当我粘贴所有默认代码http://codepen.io/Jeplaa/pen/IzAvx 它不起作用。请问你可以帮我。如何我可以让用户点击按钮时显示下拉菜单并保持直到用户再次点击按钮。如何使下拉菜单
我有2个脚本
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/menu.js"></script>
而且在下拉菜单中的代码：
$(".cog, .admin-text").on("click", function()
{
\t \t $(".menu").stop().fadeToggle("fast");
});/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
\t position: relative;
\t top: 5px;
\t width: 250px;
\t margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t color: #888;
\t border: none;
\t border-radius: 3px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t line-height: 41px;
\t cursor: default;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t -o-user-select: none;
\t user-select: none;
\t margin-bottom: 7px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.down
{
\t position: absolute;
\t top: 0;
\t right: 0;
\t padding: 10px 14px 0 0;
\t border: none;
\t color: #888888;
\t font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
\t display: block;
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t text-decoration: none;
\t color: #000000;
\t color: rgba(0, 0, 0, 0.4);
\t line-height: 40px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child(2)
{
\t border-top-left-radius: 3px;
\t border-top-right-radius: 3px;
}
.menu a:last-child
{
\t border-bottom-left-radius: 3px;
\t border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
\t width: 0;
\t height: 0;
\t margin-left: 15px;
\t border-left: 7px solid transparent;
\t border-right: 7px solid transparent;
\t border-bottom: 9px solid #F8F8F8;
}<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
<a href="#">Edit User</a>
<a href="#">Worker Statistics</span></a>
<a href="#">Settings</span></a>
<a href="#">Logout</a>
</div>
</div>
</div>
答
您使用JQ
$(".cog, .admin-text").on("click", function()
{
$(".menu").stop().fadeToggle("fast");
});
.cog和.admin-text在HTML中不存在。我想你想你.menu出现（淡入）单击.arrow或与类文本“.user_text”
之后你也说，.menu总是出现着，当然出现这种情况，如果你不把它隐藏。在这个例子中，我通过CSS设置{display:none}下面
见代码让我知道，如果这是你想要的东西隐藏它。
$(".down,.user_text").click(function(){
$(".menu").fadeToggle("fast");
}).top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
\t position: relative;
\t top: 5px;
\t width: 250px;
\t margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t color: #888;
\t border: none;
\t border-radius: 3px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t line-height: 41px;
\t cursor: default;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t -o-user-select: none;
\t user-select: none;
\t margin-bottom: 7px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.down
{
\t position: absolute;
\t top: 0;
\t right: 0;
\t padding: 10px 14px 0 0;
\t border: none;
\t color: #888888;
\t font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
\t display: block;
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t text-decoration: none;
\t color: #000000;
\t color: rgba(0, 0, 0, 0.4);
\t line-height: 40px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child(2)
{
\t border-top-left-radius: 3px;
\t border-top-right-radius: 3px;
}
.menu a:last-child
{
\t border-bottom-left-radius: 3px;
\t border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
\t width: 0;
\t height: 0;
\t margin-left: 15px;
\t border-left: 7px solid transparent;
\t border-right: 7px solid transparent;
\t border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
<a href="#">Edit User</a>
<a href="#">Worker Statistics</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</div>+0
非常感谢。像魅力一样工作 –
答
第一步：添加HTML
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
第二步：新增CSS
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
第三步：添加JavaScript的
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
+0
为什么不使用OP提供的代码？而不是从这里复制粘贴一个预先制作的下拉代码：http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click？ –
答
.down & .user_text
试试：
$(".down, .user_text").on("click", function() {
\t \t $(".menu").stop().fadeToggle("fast");
});/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
\t position: relative;
\t top: 5px;
\t width: 250px;
\t margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t color: #888;
\t border: none;
\t border-radius: 3px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t line-height: 41px;
\t cursor: default;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t -o-user-select: none;
\t user-select: none;
\t margin-bottom: 7px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.down
{
\t position: absolute;
\t top: 0;
\t right: 0;
\t padding: 10px 14px 0 0;
\t border: none;
\t color: #888888;
\t font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
\t display: block;
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t text-decoration: none;
\t color: #000000;
\t color: rgba(0, 0, 0, 0.4);
\t line-height: 40px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child(2)
{
\t border-top-left-radius: 3px;
\t border-top-right-radius: 3px;
}
.menu a:last-child
{
\t border-bottom-left-radius: 3px;
\t border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
\t width: 0;
\t height: 0;
\t margin-left: 15px;
\t border-left: 7px solid transparent;
\t border-right: 7px solid transparent;
\t border-bottom: 9px solid #F8F8F8;
}<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img">
<b class="user_text">Curtis Jackson</b>
</div>
<span class="down">
<img src="http://i.imgur.com/bLXw2RL.png">
</span>
<div class="menu">
<div class="arrow"></div>
<a href="#">Edit User</a>
<a href="#">Worker Statistics</span></a>
<a href="#">Settings</span></a>
<a href="#">Logout</a>
</div>
</div>
</div>
答
你可以在jquery中使用fadeIn和fadeOut 查看jquery中的文档
答
你没有任何带有cog或admin-text类的元素。您正在使用onclick这些。您所提供的codePen例如包含管理文本类
+0
他错过了管理文本课的权利。那为什么要投票呢？ – Rajashekhar
答
的元素替换此行：
$(".cog, .admin-text").on("click", function()
这一行：
$(".admin-panel").on("click", function()
...，它会工作。
您可以检查它Codepen：http://codepen.io/catalin586/pen/LRbELV
你也可以在默认情况下显示没有添加到您的菜单：
.menu {display: none;}
答
取出.cog和改变.admin-文本。管理面板
$(".cog, .admin-text").on("click", function()
到
$(".admin-panel").on("click", function()
希望它有帮助！
$(".admin-panel").on("click", function()
{
\t \t $(".menu").stop().fadeToggle("fast");
});/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
\t position: relative;
\t top: 5px;
\t width: 250px;
\t margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t color: #888;
\t border: none;
\t border-radius: 3px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t line-height: 41px;
\t cursor: default;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t -o-user-select: none;
\t user-select: none;
\t margin-bottom: 7px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.down
{
\t position: absolute;
\t top: 0;
\t right: 0;
\t padding: 10px 14px 0 0;
\t border: none;
\t color: #888888;
\t font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
\t display: block;
\t background: #F8F8F8;
\t width: 240px;
\t height: 40px;
\t padding: 0 0 0 10px;
\t font: bold 13px Helvetica, sans-serif;
\t text-transform: uppercase;
\t text-decoration: none;
\t color: #000000;
\t color: rgba(0, 0, 0, 0.4);
\t line-height: 40px;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child(2)
{
\t border-top-left-radius: 3px;
\t border-top-right-radius: 3px;
}
.menu a:last-child
{
\t border-bottom-left-radius: 3px;
\t border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
\t width: 0;
\t height: 0;
\t margin-left: 15px;
\t border-left: 7px solid transparent;
\t border-right: 7px solid transparent;
\t border-bottom: 9px solid #F8F8F8;
}<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
<a href="#">Edit User</a>
<a href="#">Worker Statistics</span></a>
<a href="#">Settings</span></a>
<a href="#">Logout</a>
</div>
</div>
</div>
下拉菜单非常简单。只需检查w3schools（http://www.w3schools.com/howto/howto_js_dropdown.asp）或使用引导程序http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp –