单击其他菜单项时隐藏当前子菜单
Posted
技术标签:
【中文标题】单击其他菜单项时隐藏当前子菜单【英文标题】：Hide current submenu when other menu item is clicked 【发布时间】：2019-09-19 00:45:39 【问题描述】：我创建了一个标题，其中包含子菜单和所有内容。如果我单击一个菜单，其中有这些菜单的子菜单，它工作正常。但问题是当我点击另一个包含子菜单的菜单时，我们点击的前一个菜单并没有被隐藏。两个菜单都显示了活动和非活动模式。这是我写的代码：
//javascript Code:
$('.main-menu li a + ul').prev('a').append('<span class="caret"></span>');
$('.main-menu ul li a').click(function (e)
if ($(this).next().hasClass('sub-menu'))
e.preventDefault();
// $('.sub-menu').slideUp(); // <--- This is the culprit
$('.main-menu ul li a').removeClass('active');
if ($(this).next('.sub-menu').is(':visible'))
$(this).removeClass('active');
$(this).next('.sub-menu').slideUp();
else
$(this).addClass('active');
$(this).next('.sub-menu').slideToggle();
);/*CSS:*/
.main-menu
width: 100%;
position: relative;
.main-menu ul
list-style: none;
font-size: 0;
line-height: 0;
text-align: right;
.main-menu ul li
display: inline-block;
vertical-align: top;
.main-menu ul li a
padding: 42px 25px;
color: #898E94;
display: block;
font-size: 16px;
line-height: 18px;
font-family: 'Roboto_reg';
.side-nav
width: 340px;
right: 0;
position: absolute;
background-color: #222222;
top: 100px;
z-index: 10;
display: none;
height: auto;
.side-nav ul li li a
padding-left: 70px;
font-family: 'source_sans_proregular';
.side-nav ul li a:hover
background-color: #ff3c1f;
cursor: pointer;
.side-nav ul li a
color: white;
font-size: 16px;
line-height: 24px;
padding: 15px 50px;
display: block;
position: relative;
border-top: 1px solid transparent;
.side-nav.active
display: block;
.side-nav ul li ul
border-bottom: 1px solid rgba(255, 60, 31, 0.3);
padding-bottom: 30px;
.side-nav ul li a.active
border-color: rgba(255, 60, 31, 0.3);
.sub-menu
display: none;
.side-nav ul li
position: relative;
.caret
position: absolute;
width: 10px;
height: 10px;
top: 20px;
right: 65px;
border: 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
.sub-menu li a
padding: 10px 25px !important;
line-height: 0px !important;
margin-top: -22px;
.sub-menu li a
margin-left: -237px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- html: -->
<div class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li>
<li class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
<li class="menu-item">
<a href="#" ><span>Menu3</span><span class="caret"></span></a>
<ul class="sub-menu">
<li class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li>
</ul>
</li>
<li class="menu-item">
<a href="#"><span>Other Links</span><span class="caret"></span></a>
<ul class="sub-menu">
<li class="menu-item"><a href="http://localhost/bar/sumenu8/" ><span>Submenu8</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li>
</ul>
</li>
<li class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
</ul>
</div>它没有显示箭头图标，它在移动设备上运行良好，但在桌面上出现问题。
【问题讨论】：
【参考方案1】：我已经编辑了您的 JavaScript 代码以允许切换和隐藏其他活动的子菜单。
编辑：编辑 css 以修复布局。
$('.main-menu ul li a').click(function (e)
// remove the active class with every click
var same = $(this).hasClass('active');
var siblings = $(this).parent('.menu-item').parent().children();
siblings.find('a.active + .sub-menu').slideUp();
siblings.find('a').removeClass('active');
if ($(this).next().hasClass('sub-menu') && !same)
e.preventDefault();
$(this).addClass('active');
$(this).next('.sub-menu').slideDown();
);/*CSS:*/
.main-menu
width: 100%;
position: relative;
.menu
list-style-type: none;
.menu-item
position: relative;
display:inline-block;
padding-right: 20px;
.sub-menu
padding-left: 0;
display: none;
position: absolute;
top: 100%;
left: 0;
.sub-menu.level-2
left: 100%;
.caret
position: absolute;
top: 5px;
right: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7px 0 7px;
border-color: #000 transparent transparent transparent;
.menu-item a.active .caret
border-width: 0 7px 7px 7px;
border-color: transparent transparent #000 transparent;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML: -->
<div class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li>
<li class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
<li class="menu-item">
<a href="#" ><span>Menu3</span><span class="caret"></span></a>
<ul class="sub-menu">
<li class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li>
</ul>
</li>
<li class="menu-item">
<a href="#"><span>Other Links</span><span class="caret"></span></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">
<span>Other Links</span><span class="caret"></span></a>
<ul class="sub-menu level-2">
<li class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>SubSubMenu</span></a></li>
</ul>
</li>
<li class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li>
<li class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li>
</ul>
</li>
<li class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
</ul>
</div>【讨论】：
如果您检查了其他链接，则子菜单会一对一地重叠 是的，因为你的 css 是一团糟，我的朋友 :) 请再等一下，我会修复它。 @tester 我已经编辑了 css 以获得可行的解决方案。 只有那些css需要添加，其余的css应该删除 修复了插入符号。对不起，但我不明白你的意思是“只需要添加那些 css 其余 css 应该删除”。以上是关于单击其他菜单项时隐藏当前子菜单的主要内容，如果未能解决你的问题，请参考以下文章