如何制作下拉菜单

时间：2016-09-20 11:04:35

标签： javascript html css

我在互联网上找到了这个下拉菜单。问题是下拉列表始终打开，但它不起作用。当我粘贴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()
{
		$( ".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
{
	position: relative;
	top: 5px;
	width: 250px;
	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
{
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	color: #888;
	border: none;
	border-radius: 3px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 41px;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	margin-bottom: 7px;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}

.down
{
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 14px 0 0;
	border: none;
	color: #888888;
	font-size: 20px;
}

.down:hover { color: #555555; }

.user_text { cursor: pointer; }

.menu a
{
	display: block;
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	color: rgba( 0, 0, 0, 0.4 );
	line-height: 40px;
	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 )
{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.menu a:last-child
{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.menu a:hover { color: #555555; }

.menu a:hover > .octicon { color: #555555; }

.arrow
{
	width: 0;
	height: 0;
	margin-left: 15px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	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>

6 个答案:

答案 0 :(得分：1)

替换此行：

$( ".cog, .admin-text" ).on( "click", function()

这一行：

$( ".admin-panel" ).on( "click", function()

......它会起作用。

您可以在Codepen上查看：http://codepen.io/catalin586/pen/LRbELV

您可能还希望在菜单中添加无显示：

.menu {display: none;}

答案 1 :(得分：0)

你在JQ中使用

 $( ".cog, .admin-text" ).on( "click", function()
   {
    $( ".menu" ).stop().fadeToggle( "fast" );
   });
您的HTML中不存在

.cog和.admin-text。我想你希望你的.menu出现（fadeIn）后点击.arrow或带有类＆＃34; .user_text＆＃34;

的文字

你也说.menu总是出现，如果你不隐藏它就会发生。在这个例子中，我通过在CSS中设置{display:none}

来隐藏它

见下面的代码

如果这是你想要的，请告诉我。

＆＃13;
＆＃13; 
$(".down,.user_text").click(function(){
   $(".menu").fadeToggle( "fast" );

})
＆＃13; 
.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
{
	position: relative;
	top: 5px;
	width: 250px;
	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
{
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	color: #888;
	border: none;
	border-radius: 3px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 41px;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	margin-bottom: 7px;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}

.down
{
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 14px 0 0;
	border: none;
	color: #888888;
	font-size: 20px;
}

.down:hover { color: #555555; }

.user_text { cursor: pointer; }

.menu a
{
	display: block;
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	color: rgba( 0, 0, 0, 0.4 );
	line-height: 40px;
	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 )
{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.menu a:last-child
{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.menu a:hover { color: #555555; }

.menu a:hover > .octicon { color: #555555; }

.arrow
{
	width: 0;
	height: 0;
	margin-left: 15px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

.down＆amp; .user_text

试一试：

$( ".down, .user_text" ).on( "click", function() {
		$( ".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
{
	position: relative;
	top: 5px;
	width: 250px;
	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
{
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	color: #888;
	border: none;
	border-radius: 3px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 41px;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	margin-bottom: 7px;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}

.down
{
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 14px 0 0;
	border: none;
	color: #888888;
	font-size: 20px;
}

.down:hover { color: #555555; }

.user_text { cursor: pointer; }

.menu a
{
	display: block;
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	color: rgba( 0, 0, 0, 0.4 );
	line-height: 40px;
	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 )
{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.menu a:last-child
{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.menu a:hover { color: #555555; }

.menu a:hover > .octicon { color: #555555; }

.arrow
{
	width: 0;
	height: 0;
	margin-left: 15px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	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>

答案 3 :(得分：0)

删除.cog并将.admin-text更改为.admin-panel 

$( ".cog, .admin-text" ).on( "click", function()

到

$( ".admin-panel" ).on( "click", function()

希望它有所帮助！

$( ".admin-panel" ).on( "click", function()
{
		$( ".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
{
	position: relative;
	top: 5px;
	width: 250px;
	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
{
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	color: #888;
	border: none;
	border-radius: 3px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 41px;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	margin-bottom: 7px;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}

.down
{
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 14px 0 0;
	border: none;
	color: #888888;
	font-size: 20px;
}

.down:hover { color: #555555; }

.user_text { cursor: pointer; }

.menu a
{
	display: block;
	background: #F8F8F8;
	width: 240px;
	height: 40px;
	padding: 0 0 0 10px;
	font: bold 13px Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	color: rgba( 0, 0, 0, 0.4 );
	line-height: 40px;
	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 )
{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.menu a:last-child
{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.menu a:hover { color: #555555; }

.menu a:hover > .octicon { color: #555555; }

.arrow
{
	width: 0;
	height: 0;
	margin-left: 15px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	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>

答案 4 :(得分：-1)

您没有任何包含cog或admin-text类的元素。您正在使用onclick这些。您提供的codePen示例包含一个带有admin-text class

的元素

答案 5 :(得分：-2)

你可以在jquery中使用fadeIn和fadeOut 请参阅jquery中的文档

相关问题
最新问题