0
私のWeb開発者向けポートフォリオの模擬サイトで作業しています。 JavascriptとJQueryの経験はあまりありませんが、Navメニューのドロップダウンを表示したり非表示にする最も効率的な方法を見つけようとしています。私のJQueryは動作していないので、誰かがヒントを持っているかどうかを知りたかった。また、私は最初のUlのすべての楽器のドロップダウンを作成する予定です。複数列のドロップダウンの表示と非表示
HTML：
<body>
<div class="container-fluid">
<div id="main-page">
<ul id="main-menu">
<li class="main-menu-list-items" style="border: 1px solid black;">
<div class="dropdown">
<ul>
<li><a href="#" onclick="myFunction()" class="drop">Products</a></li>
<div id="myDropdown" class="dropdown-content">
<ul>
<li class="dropdown-submenu"><a onclick="myClarinetDrop()" class="clarinet-drop" href="#">Clarinet</a>
<div id="my-clarinet-dropdown" class="dropdown-content">
<ul>
<li><a href="#">Bb Clarinet</a></li>
<li><a href="#">Bb Bass Clarinet</a></li>
<li><a href="#">Eb Clarinet</a></li>
<li><a href="#">Alto Clarinet</a></li>
<li><a href="#">Bb German Clarinet</a></li>
<li><a href="#">Bb Contrabass Clarinet</a></li>
</ul>
</li>
<li><a href="#">Saxophone</a></li>
<li><a href="#">Flute</a></li>
<li><a href="#">Bassoon</a></li>
<li><a href="#">Recorder</a></li>
<li><a href="#">Brass</a></li>
<li><a href="#">Guitar</a></li>
<li><a href="#">Piano</a></li>
<li><a href="#">Orchestral</a></li>
<li><a href="#">Percussion</a></li>
</div><!--closes "myDropdown"-->
</ul>
</div><!--closes dropdown-->
</li>
<li class="main-menu-list-items"style="border: 1px solid black;">
<span>Shop By Brands</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>How To Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>Quick Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>About Us</span>
</li>
</ul><!--closes "main-menu"-->
</div><!--closes "main-page"-->
</div><!--closes "container-fluid"-->
</body>
はCSS：
body {
margin:0;
padding:0;
}
.main-menu-list-items {
list-style-type:none;/*removes bullet point*/
float:left;/*puts list items side by side -- with no spaces*/
padding:15px 75px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown >ul {
margin-left:-40px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
position: absolute;
min-width: 1154px;
border:1px solid black;
margin-left:-76px;
margin-top:15px;
height:50px;
list-style-type:none;
}
.dropdown-content > ul {
list-style-type:none;
}
.dropdown-content >ul >li {
position:relative;
float:left;
padding:15px 29px;
}
.dropdown-submenu > div > ul > li {
position:relative;
float:left;
padding:15px 52px 0 30px;
}
.dropdown-submenu > div > ul {
border:1px solid black;
height:50px;
margin-left:-70px;
bottom:-54px;
min-width: 1114px;
position:absolute;
list-style-type:none;
display:none;
}
/*ユーザーがドロップダウンボタンをクリックするとドロップダウンメニューが（.dropdown-コンテンツコンテナにこのクラスを追加するために、JSを使用して表示します）*/ .SHOW {表示：ブロック;}
はJQuery：
$(' .main-menu-list-items > .dropdown').click(function() {
var submenu = $(this).children('.dropdown > ul');
if($('.dropdown-content').css('display') == 'none') {
$(submenu).show();
}
else {
$(submenu).hide();
}
});