0
私はこのドロップダウンメニューをインターネット上に見つけました。問題はドロップダウンが常に開いていて、それはdoes not workです。私が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>
ドロップダウンメニューは非常にシンプルです。 w3schools（http://www.w3schools.com/howto/howto_js_dropdown.asp）をチェックするか、ブートストラップhttp://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp –