将两级导航菜单改为三级导航菜单
将两级导航菜单改为三级导航菜单
提问于 2018-10-18 05:04:44
我正在尝试修改，将一个两级导航菜单变成一个三级菜单，但是我不能让第三级菜单出现。当我点击第二级时，它当前只是缩回到第一级，而不显示第三级项。我已经用各种方式重新排列了代码，但我还是搞不清楚。如有任何提示，将不胜感激。(在HTML中，"Menu 3“、"Page 6”和"Page 7“是我在原始代码中添加的内容。)
JS：
$(document).ready(function(){
// Menu.
var $menu = $('#menu');
$menu_openers = $menu.children('ul').find('.opener');
// Openers.
$menu_openers.each(function() {
var $this = $(this);
$this.on('click', function(event) {
// Prevent default.
event.preventDefault();
// Toggle.
$menu_openers.not($this).removeClass('active');
$this.toggleClass('active');
// Trigger resize (sidebar lock).
$window.triggerHandler('resize.sidebar-lock');
});
});CSS：
/* Menu */
#menu ul {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color: #3d4449;
font-family: "Roboto", sans-serif;
font-family: 400;
letter-spacing: 0.075em;
list-style: none;
margin-bottom: 0;
padding: 0;
text-transform: uppercase;
}
#menu ul a,
#menu ul span {
border-bottom: 0;
color: inherit;
cursor: pointer;
display: block;
font-size: 0.9em;
padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
color: #f56a6a;
}
#menu ul a.opener,
#menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
color: #f56a6a;
}
#menu ul a.opener.active+ul,
#menu ul span.opener.active+ul {
display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
#menu>ul>li {
border-top: solid 1px rgba(210, 215, 217, 0.75);
margin: 0.5em 0 0 0;
padding: 0.5em 0 0 0;
}
#menu>ul>li>ul {
color: #9fa3a6;
display: none;
margin: 0.5em 0 1.5em 0;
padding-left: 1em;
}
#menu>ul>li>ul>ul {
color: #9fa3a6;
display: none;
margin: 0.5em 0 1.5em 0;
padding-left: 1em;
}
#menu>ul>li>ul a,
#menu>ul>li>ul span {
font-size: 0.8em;
}
#menu>ul>li>ul>li {
margin: 0.125em 0 0 0;
padding: 0.125em 0 0 0;
}
#menu>ul>li:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
}HTML
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li>
<span class="opener">Menu 1</span>
<ul>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
</ul>
</li>
<li>
<span class="opener">Menu 2</span>
<ul>
<span class="opener">Menu 3</span>
<ul>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
</ul>
</ul>
</li>
</ul>
</nav>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-18 06:25:21
这段代码：
$menu_openers.not($this).removeClass('active');不起作用，因为它将活动类从$this以外的每个元素中删除，但您要做的是从$this的兄弟元素中删除活动类。您应该改用下面的代码：
$this.parent().siblings().children('.opener').removeClass('active');顺便说一句，您可以只编写以下代码：
$menu_openers = $menu.children('.opener');这更简单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52863601
复制相关文章
相似问题