【发布时间】：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>它没有显示箭头图标，它在移动设备上运行良好，但在桌面上出现问题。
【问题讨论】：
标签： javascript jquery html css