Javascript适应当前页面

Question

我制作了一个java脚本菜单。一切都像魅力一样，开放的部分应该自动适应。当特定li元素中存在“active”类时，该菜单元素应该是打开的。

现在，第一个li元素始终处于打开状态，当类更改时，它仍处于打开状态。

你能帮我解决这个问题吗？

演示： https://jsfiddle.net/fj8fywuy/

提前谢谢！

$(document).ready(function () {
  $('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
  $('#nav li ul').slideUp();
  $(this).next().slideToggle();
  $('#nav li a').removeClass('active');
   $('#nav li a').parent().removeClass('active');
  $(this).addClass('active');
  $(this).parent().addClass('active'); // li tag inside active class
}
  });
  if($(".active").parent().parent().is('#nav')){
  		$(".active").next().slideToggle();
  }else{
  	$(".active").parents('ul').siblings('a').click();
  }
 $('#nav > li > a:first').click();
});

#nav {
    float: left;
    width: 280px;
}
#nav li a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    list-style:none;
}
#nav li a:hover, #nav li a.active {
}
#nav li ul {
    display: none; // used to hide sub-menus
     list-style:none;
}
#nav li ul li a {
    padding: 10px 25px;
}

#nav li.sub {
  padding-left: 35px;
}

ul{
  list-style:none;
  
}
.active
{
  background:#c2c2c2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li class="active"><a href="#">Item 1</a>
    <ul>
      <li><a href="#" >Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
      <li class="sub"><a href="#" >Sub-sub-Item 1 a</a></li>
      <li class="sub"><a href="#" >Sub-sub-Item 2 a</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 3 a</a></li>
      <li><a href="#">Sub-Item 3 b</a></li>
      <li><a href="#">Sub-Item 3 c</a></li>
      <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 4 a</a></li>
      <li><a href="#">Sub-Item 4 b</a></li>
      <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
  </li>
</ul>

Answer 1

你在js中没有什么问题我修复了它，现在看来一切正常。

我刚刚更换了

$('#nav > li > a:first').click();

带

$('#nav li.active a').click();

所以这将找到活跃的li并在开始时打开它。

$(document).ready(function () {
  $('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
  $('#nav li ul').slideUp();
  $(this).next().slideToggle();
  $('#nav li a').removeClass('active');
   $('#nav li a').parent().removeClass('active');
  $(this).addClass('active');
  $(this).parent().addClass('active'); // li tag inside active class
}
  });
  if($(".active").parent().parent().is('#nav')){
  		$(".active").next().slideToggle();
  }else{
  	$(".active").parents('ul').siblings('a').click();
  }
 $('#nav li.active a').click();
});

#nav {
    float: left;
    width: 280px;
}
#nav li a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    list-style:none;
}
#nav li a:hover, #nav li a.active {
}
#nav li ul {
    display: none; // used to hide sub-menus
     list-style:none;
}
#nav li ul li a {
    padding: 10px 25px;
}

#nav li.sub {
  padding-left: 35px;
}

ul{
  list-style:none;
  
}
.active
{
  background:#c2c2c2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#" >Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
      <li class="sub"><a href="#" >Sub-sub-Item 1 a</a></li>
      <li class="sub"><a href="#" >Sub-sub-Item 2 a</a></li>
    </ul>
  </li>
  <li class="active"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 3 a</a></li>
      <li><a href="#">Sub-Item 3 b</a></li>
      <li><a href="#">Sub-Item 3 c</a></li>
      <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 4 a</a></li>
      <li><a href="#">Sub-Item 4 b</a></li>
      <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
  </li>
</ul>