jquery - Jquery中的嵌套手风琴菜单

Question

我有一个问题，找不到解决方案。我正在 jquery 中制作手风琴菜单，并希望菜单的第二级一次打开一个。

并希望在网站上使用它来帮助如何在页面重新加载时保持打开状态。

我第一次问很抱歉，如果它不可读。

希望任何人都可以提供帮助。

我是这种东西的菜鸟。

$(document).ready(function(){
  menuHead = $('.slide-list li a').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    $(this).next().toggle("slow");
  });    
});

* {
  margin: 0;
  padding: 0;   
}

html, body {
  height: 100%;
  width: 100%;  
}

a:link {
  text-decoration:none;
  color: #000;
}

a:active {
  text-decoration:none;
  color: #000;
}

a:visitied {
  text-decoration:none;
  color: #000;  
}

a:hover {
  text-decoration:none;
  color: #CCC;
}


#menu-wrapper {

}

#menu-wrapper ul.slide-list li {
  list-style-type: none;    
}

#menu-wrapper ul.slide-list li a.selected {
  color: #F00;  
}

#menu-wrapper ul.slide-list li ul {
  display: none;    
}

#menu-wrapper ul.slide-list li ul li ul {
  display: none;    
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="menu-wrapper">
  <ul class="slide-list">
    <li>
        <a href="javascript:void()">menu item 1</a>
          <ul>
            <li>
                <a href="javascript:void()">submenu item 1 level 2</a>
                  <ul>
                    <li>
                        <a href="javascript:void()">submenu item level 3</a>
                      </li>
                  </ul>
              </li>
              <li>
                <a href="javascript:void()">submenu item 2 level 2</a>
                  <ul>
                    <li>
                        <a href="javascript:void()">submenu item level 3</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>
        <a href="javascript:void()">menu item 2</a>
          <ul>
            <li>
                <a href="javascript:void()">submenu item 1 level 2</a>
              </li>
          </ul>     
      </li>
    <li>
        <a href="javascript:void()">menu item 3</a>
      </li>
  </ul>
</div>

Answer 1

试试这个

if(window.location.hash.length > 0){
  var $licurrent = $($('.slide-list li').get(window.location.hash.replace('#','')));
  $licurrent.parents("ul").show();
  $licurrent.find("ul:first").show();
  $licurrent.find("a:first").addClass("selected");
}

$(document).ready(function(){
  $('.slide-list li a').click(function(e) {                     
      e.preventDefault();
      $('.selected').removeClass('selected');
      $(this).addClass('selected');

      var $licurrent = $(this).parent();
      window.location.hash = $('.slide-list li').index($licurrent);

      $licurrent.parent().find("li").not($licurrent).find("ul").hide("slow");
      $(this).next("ul").toggle("slow");
  });
});

* {
  margin: 0;
  padding: 0;    
}

html, body {
  height: 100%;
  width: 100%;    
}

a:link {
  text-decoration:none;
  color: #000;
}

a:active {
  text-decoration:none;
  color: #000;
}

a:visitied {
  text-decoration:none;
  color: #000;    
}

a:hover {
  text-decoration:none;
  color: #CCC;
}


#menu-wrapper {

}

#menu-wrapper ul.slide-list li {
  list-style-type: none;  
}

#menu-wrapper ul.slide-list li a.selected {
  color: #F00;    
}

#menu-wrapper ul.slide-list li ul {
  display: none;  
}

#menu-wrapper ul.slide-list li ul li ul {
  display: none;  
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="menu-wrapper">
  <ul class="slide-list">
      <li>
          <a href="javascript:void()">menu item 1</a>
          <ul>
              <li>
                  <a href="javascript:void()">submenu item 1 level 2</a>
                  <ul>
                      <li>
                          <a href="javascript:void()">submenu item level 3</a>
                          <ul>
                            <li>
                                <a href="javascript:void()">submenu item level 4</a>
                            </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="javascript:void()">submenu item 2 level 2</a>
                  <ul>
                      <li>
                          <a href="javascript:void()">submenu item level 3</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>
          <a href="javascript:void()">menu item 2</a>
          <ul>
              <li>
                  <a href="javascript:void()">submenu item 1 level 2</a>
              </li>
          </ul>     
      </li>
      <li>
          <a href="javascript:void()">menu item 3</a>
      </li>
  </ul>
</div>

此代码将在 URL 中添加哈希，当您刷新页面时，您会发现该菜单已被选中。