javascript - 下拉菜单的制作方法

Question

我在 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()
{
		$( ".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>

Answer 1

替换这一行:

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

用这一行:

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

... 它会起作用。

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

您可能还想在菜单中添加默认不显示:

.menu {display: none;}