当我使用 jQuery 激活这个 url 时激活子菜单答案

【问题标题】：Active child menu when I active this url using jQuery当我使用 jQuery 激活这个 url 时激活子菜单
【发布时间】：2016-02-28 09:08:16
【问题描述】：

我创建了一个侧边栏，当我停留在Sidebar Menu 之类的父菜单时，激活类可以正常工作，如果我然后单击Sub Menu，尽管显示正确的文章，NAV 栏会关闭并失去我的导航位置。

在我的工作代码下面：

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>

jQuery

$("#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 时激活子菜单

我怎样才能得到这个解决方案？

JSFiddle

【问题讨论】：

我没有看到您提供的代码有任何问题，除了显示子菜单之外什么也没发生

标签： javascript jquery html css

【解决方案1】：

我想这就是你想要的。我只关心你的主要观点。对不起用户界面。试试这个，告诉我这是你的情况。你可以在这里试试。

<!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>

【讨论】：

嗨，这是Issue 1。我很困扰Issue 2
对于您的第二个问题，请尝试使用 target="_blank" 从新标签打开您的链接。然后在第一个视图中它始终显示您的菜单和激活的链接。更新了答案

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>active child test</title>
<link rel="stylesheet" 
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#sidebar ul li{
list-style: none;
}
#sidebar ul li a{
text-decoration: none;
}       
.glyphicon {
top: -3.1px;
font-size: 14px;
}
.uparrow{
display: none;
}
</style>
</head>
<body>
<div id='sidebar'>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar</a>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>    
<script  
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">  
</script>
<script>
$(document).ready(function(){
$("a").click(function(){            
var parent=$(this).parent();
$('.downarrow',parent).toggle();
$('.uparrow',parent).toggle();

$("ul",parent).slideToggle("fast");
$(this).toggleClass("up");
});
})
</script>
</body>
</html>

【讨论】：