使用jquery单击特定li时如何显示ul? [英] How to show an ul when a particular li is clicked using jquery?

问题描述

我想显示被单击的li的ul类. 我的html是:

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>

我用来显示ul的js如下:

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;}

当我单击li.level1 current类设计时，将其添加到level1的每个li中，将打开所选li中的ul，并且由于具有锚标记，因此页面将重定向到url在锚标记内.

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 .

我想要的是，当我单击li时，应该仅将current类添加到所选的li&中.应当打开锚标记中各个url的页面，并在其中打开所选li的ul.

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.

推荐答案

要实现此目的，您将不得不利用位置哈希. 请执行以下操作:

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

1. 在切换您的ul的锚标记上，将href添加到虚拟唯一值.确保该值与您所在的li的ID相同.

1. 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;">

1. 加载页面时，请读取窗口位置哈希.

var li = window.location.hash;

1. 如果找到哈希，则显示相关的ul.

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

这样，您将可以显示用户最近打开的ul.

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>

这篇关于使用jquery单击特定li时如何显示ul?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！