0
私は、親リストアイテムをクリックするとネストされたul liアイテムが表示されるカスタムアコーディオンタイプのナビゲーションメニューを作成しようとしています。親li項目を再度クリックすると、それらは非表示になります。しかし、問題を引き起こしていることの1つは、以前に開いたulリスト項目があれば、それを閉じたり隠したりしたいということです。私はそれを完璧にする方法を知らない - 私のソリューションは100％正確に動作していません。jQueryで開いたul liを閉じる/隠す方法は？
私のコードは次のとおりです。
HTML
<div id="header_wrapper"> <!-- HEADER WRAPPER STARTS -->
<div id="header"> <!-- HEADER STARTS -->
<div id="logo"> <!-- LOGO STARTS -->
<a href="#"><img src="images/logo.png" alt="logo" class="responsive" /></a>
</div> <!-- LOGO ENDS -->
<div id="nav_wrapper"> <!-- NAVIGATION WRAPPER STARTS -->
<div id="menu_icon_wrapper">
<div id="menu_icon"></div>
</div>
<div id="nav_bar"> <!-- NAVIGATION BAR STARTS -->
<ul id="nav"> <!-- NAVIGATION STARTS -->
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
</ul>
</li>
<li><a href="#" class="active">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
</ul>
</li>
</ul> <!-- NAVIGATION ENDS -->
</div> <!-- NAVIGATION BAR ENDS -->
</div> <!-- NAVIGATION WRAPPER ENDS -->
<div class="clearfix"></div>
</div> <!-- HEADER ENDS -->
</div> <!-- HEADER WRAPPER ENDS -->
CSS
#header_wrapper {
background-color:red;
width:100%;
}
#header {
max-width:1000px;
margin:0 auto;
padding:10px 0;
position:relative;
}
#logo {
/*float:left;*/
}
#nav_bar {
position:relative;
z-index:99999;
background-color:#F34744;
}
#nav_bar ul li a {
background-color:#F34744;
border-top:1px solid #EE312D;
padding:6px 12px;
display:block;
color:#FFFFFF;
font-size:14px;
outline:none;
text-align:left;
}
#nav_bar ul li a:hover,
#nav_bar ul li a.active {
background-color:#EE312D;
}
#nav_bar ul li ul li a {
text-indent:25px;
background-color:#F45d5A;
}
#nav_bar ul li ul {
display:none;
}
#nav_bar ul li ul.inner_dd {
display:block;
}
/* main nav */
ul#nav {
display:none; /* visibility will be toggled with jquery */
}
/* menu icon */
#menu_icon_wrapper {
position:relative;
height:24px;
}
#menu_icon {
background-color:blue;
background-repeat:no-repeat;
width:45px;
height:45px;
position:absolute;
top:-21px;
right:-1px;
cursor:pointer;
}
#menu_icon:hover {
/*background-color:#dd7d06;*/
}
#menu_icon.active {
/*background-color:#EE312D;*/
}
@media only screen and (min-width:900px) {
#header_wrapper {
border-top:5px solid yellow;
}
#nav_wrapper {
position:absolute;
bottom:40px;
right:0;
}
#menu_icon_wrapper {
display:none; /* hide menu icon initially */
}
/* Ensure #nav is visible on desktop version */
ul#nav {
display:block !important;
}
#nav_bar ul li {
float:left;
position:relative;
margin-right:35px;
}
#nav_bar ul li a
{
border-top:none;
background-color:transparent;
padding:0;
color:#666666;
display:block;
font-size:15px;
}
#nav_bar ul li:last-child {
margin-right:0;
}
#nav_bar ul li a.active,
#nav_bar ul li a:hover {
color:#000000;
background-color:transparent;
}
#nav_bar ul li a.active {
/*border-bottom:2px solid #EE312D;*/
}
/* dropdown menu */
#nav_bar ul li ul {
display:none;
position:absolute;
left:0;
top:24px;
border:1px solid #666666;
background-color:#F8F8F8;
}
/* Display dropdown menu on hover */
#nav_bar ul li ul.inner_dd {
display:none;
}
#nav_bar ul li:hover ul {
display:block;
}
#nav_bar ul li ul li {
float:none;
z-index:99999;
margin-right:0;
}
#nav_bar ul li ul li a {
text-indent:inherit;
background-color:transparent;
display:block;
white-space:nowrap;
padding:0 10px;
font-size:14px;
}
#nav_bar ul li ul li a:hover {
background-color:#EEEEEE;
}
}
jQueryの
// Toggle navigation
$("#menu_icon").on("click", function(){
$("ul#nav").slideToggle();
$(this).toggleClass("active");
});
// Show/hide dropdown menu
$("ul#nav li a").click(function(e){
if($(this).closest("li").children("ul").length != 0)
{
if($(window).innerWidth() < 900)
{
e.preventDefault();
$(this).siblings('ul').toggleClass('inner_dd');
}
}
});
Here'sこれまでの作業コードは動作しています。
デモでは、青い四角をクリックすると、ドロップダウンメニューが表示されます。私は "item 1"を "item 3"を開くときに閉じたいと思います。他のメニュー項目と同様の動作です。
うわー！あなたは私が要求したものを正確にしました。Btw私のコードロジックを変更しました。 – user5307298