0

問題があり、解決策が見つかりません。jqueryでアコーディオンメニューを作成していて、メニューの2番目のレベルを一度に1つずつ開きたいと思っています。

そして、ページがリロードされたときにこれを開いたままにする方法のヘルプをWebサイトで使用したいと思います。

読めないのでごめんなさい。

誰もが助けてくれることを願っています。

私はこの種のものの初心者です。

$(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>

4

1 に答える 1

0

これを試して

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にハッシュを追加し、ページを更新すると、そのメニューが選択されていることがわかります。

于 2012-06-19T18:12:09.720 に答える