How to show an ul when a particular li is clicked using jquery?

问题

I want to show the ul class of li which is clicked. My html is:

 <ul id="level1" class="category">
    <li class="level1 inactive">
      <a href="#">abc</a>
      <ul id="level2" style=" display:none;">
      <li class="level2 inactive"><a href="#">Level2</a></li>
      <li class="level2 inactive"><a href="#">Level2</a></li>
      <li class="level2 inactive"><a href="#">Level2</a></li>
      </ul>
    </li>
    <li class="level1 inactive">
      <a href="#">xyz</a>
      <ul id="level2" style=" display:none;">
      <li class="level2 inactive"><a href="#">Level2</a></li>
      <li class="level2 inactive"><a href="#">Level2</a></li>
      <li class="level2 inactive"><a href="#">Level2</a></li>
      </ul>
    </li>
    <li class="level1 inactive">
      <a href="#">bcd</a>
      <ul id="level2" style=" display:none;">
      <li class="level2 inactive"><a href="#">Level2</a></li>
      <li class="level2 inactive"><a href="#">Level2</a></li>
      <li class="level2 inactive"><a href="#">Level2</a></li>
      </ul>
    </li>
    </ul>

the js which I use to show the ul is below:

<script>  
var $j = jQuery.noConflict();
$j(function() {
  $j('li.level1').click(function() {
      $j(this).addClass("current").removeClass("inactive");
      $j('ul#level2:visible').hide();
      $j('ul#level2').toggle();
  });

});
</script>

css:

   ul.category li.level1.current a{background:url("../images/left_menu_new.png") no-repeat scroll 10px -285px transparent;}
    .active{display:block;}

When I click the li.level1 current class design is added to every li of level1 , ul inside the selected li is opened and as it has anchor tag the page is redirected to the url inside the anchor tag .

What I want is when I click the li the current class should be added only to the selected li & the page of respective url in the anchor tag should be opened and ul of selected li should be opened there.

Kindly guide me to resolve this issue.

回答1:

For you to achieve this, you will have to take advantage of location hash. Do the following :

On your anchor tags, that toggle your ul, add href to a dummy unique value. Make sure the value is same as the id of the li you are in.

<ul class="level0">
      <li class="level1" id="li1">
          <a href="#li1">Toggle.1</a>
          <ul class="level1" style="display:none;">

When ever page loads, read window location hash.

var li = window.location.hash;

If hash is found, show the related ul.

if(li!=""){
  $(li + " ul").show();
}

This way you will be able to show the last opened ul by the user.

$(function() {
  var li = window.location.hash;
  if (li != "") {
    $(li + " ul").show();
  }
  $('li.level1 a').click(function() {
    $(this).parent().siblings().each(function() {
      $(this).find("ul.level1").hide();
    });
    $(this).siblings("ul.level1").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level0">
  <li class="level1" id="li1">
    <a href="#li1">Toggle.1</a>
    <ul class="level1" style="display:none;">
      <li class="level2"><a href="#">Level2.1</a>
      </li>
      <li class="level2"><a href="#">Level2.1</a>
      </li>
      <li class="level2"><a href="#">Level2.1</a>
      </li>
    </ul>
  </li>
  <li class="level1" id="li2">
    <a href="#li2">Toggle.2</a>
    <ul class="level1" style="display:none;">
      <li class="level2"><a href="#">Level2.2</a>
      </li>
      <li class="level2"><a href="#">Level2.2</a>
      </li>
      <li class="level2"><a href="#">Level2.2</a>
      </li>
    </ul>
  </li>
  <li class="level1" id="li3">
    <a href="#li3">Toggle.3</a>
    <ul class="level1" style="display:none;">
      <li class="level2"><a href="#">Level2.3</a>
      </li>
      <li class="level2"><a href="#">Level2.3</a>
      </li>
      <li class="level2"><a href="#">Level2.3</a>
      </li>
    </ul>
  </li>
</ul>

来源：https://stackoverflow.com/questions/37990391/how-to-show-an-ul-when-a-particular-li-is-clicked-using-jquery

标签

html-lists

toggle