我已经创建了一个侧边栏，当我只保留像Sidebar Menu这样的父菜单时，激活类可以正常工作，如果我然后点击一个子菜单，虽然正确的文章显示，导航栏关闭并丢失我的导航位置。
下面是我的工作代码:
HTML:
<div id='sidebar'>
<ul>
<li><a href='#'>Sidebar Menu</a></li>
<li class='sub'><a href='#'>Sidebar</a>
<ul>
<li class='sub'><a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li class='sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
查询
$("#sidebar > ul > li").each(function() {
var sideItem = $(this);
if (sideItem.find("a").attr("href") == location.pathname) {
sideItem.addClass("activation");
}
});
$('#sidebar li.active').addClass('open').children('ul').show();
$('#sidebar li.sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
问题 1:如果我不关闭子菜单，则让子菜单保持打开状态
如下图:
同时打开我这样实现的三个子菜单。
问题 2:激活此 url 时激活子菜单
我怎样才能找到这个解决方案？
最佳答案
我想这就是你想要的。我只关心你的要点。抱歉关于 UI。试试这个并告诉我这是你的情况。你可以在这里试试。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.navi{
width: 200px;
}
ul{
color: orange;
cursor: pointer;
font-weight: bold;
}
ul li{
list-style-type: none;
color: black;
text-indent: 20%;
font-weight: normal;
display: list-item;
display: none;
}
ul li:hover{
background-color: orange;
color: white;
}
ul li:active{
background-color: orange;
color: white;
}
</style>
<body>
<div class="navi">
<ul class="one"><span class="onez"> > Sub One</span>
<li><a href="" target="_blank">First</a></li>
<li><a href="" target="_blank">Second</a></li>
</ul>
<ul class="two"> <span class="twoz"> > Sub Two</span>
<li><a href="" target="_blank">Third</a></li>
<li><a href="" target="_blank">Four</a></li>
</ul>
</div>
<script type="text/javascript">
$(".onez").click(function(){
if ($("ul.one li").is(':visible')){
$("ul.one li").slideUp();
}
else{
$("ul.one li").slideDown();
}
});
$(".twoz").click(function(){
if ($("ul.two li").is(':visible')){
$("ul.two li").slideUp();
}
else{
$("ul.two li").slideDown();
}
});
</script>
</body>
</html>关于javascript - 当我使用 jQuery 激活这个 url 时激活子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35680623/