jQuery show() не работает должным образом

Question

У меня возникла проблема с расширением дочернего содержимого тега li в jquery. Мое содержание:

<ul id="0" class="set_preference"> 
    <li class="1stlevel">1st-Entertainment 
     <ul> 
      <li class="2ndlevel">2nd-Films 
       <ul> 
        <li class="3rdlevel">3rdTollywood 
         <ul> 
          <li class="4thlevel"> 
          <input type="checkbox" value="58" name="checkChild[]" class1="checkChild css-checkbox" id="cat_58">Bhooter bhabishyat</li> 
         </ul> 
        </li> 
        <li class="3rdlevel">3rdbollywood 
         <ul> 
          <li class="4thlevel">4th<input type="checkbox" value="60" name="checkChild[]" class1="checkChild css-checkbox" id="cat_60">krish</li> 
         </ul> 
        </li> 
        <li class="3rdlevel">3rdHollywood 
         <ul> 
          <li class="4thlevel">4th<input type="checkbox" value="62" name="checkChild[]" class1="checkChild css-checkbox" id="cat_62">Spiderman</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Television 
       <ul> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="1stlevel">1st-Celebrities 
     <ul> 
      <li class="2ndlevel">2nd-Film 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Music 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Public Life 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Sports 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Others 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-<input type="checkbox" value="18" name="checkChild[]" class1="checkChild css-checkbox" id="cat_18">Television 
       <ul> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="1stlevel">1st-Sports 
     <ul> 
      <li class="2ndlevel">2nd-Badminton 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Cricket 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Soccer 
       <ul> 
       </ul> 
      </li> 
      <li class="2ndlevel">2nd-Tennis 
       <ul> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="1stlevel">1st-Music 
     <ul> 
     </ul> 
    </li> 
    <li class="1stlevel">1st-Brands 
     <ul> 
     </ul> 
    </li> 
    <li class="1stlevel">1st-Cartoons 
     <ul> 
     </ul> 
    </li> 
</ul> 

и я пытаюсь в JQuery, как:

$j('.1stlevel').click(function(){ 
      $j('.2ndlevel').show(); 
      $j(this).children().css({"border":"1px solid red"}); 
//   $j(this).find('ul li').hide(); 
     }); 
     $j('.2ndlevel').click(function(){ 
      $j('.3rdlevel').show(); 
      $j(this).children().css({"border":"1px solid pink"}); 
//   $j(this).find('ul li').hide(); 
//   $j(this).find('ul li').hide(); 
     }); 
     $j('3rdlevel').click(function(){ 
      $j('.4thlevel').show(); 
      $j(this).children().css({"border":"1px solid green"}); 
//   $j(this).find('ul li ul li').hide(); 
      //$j(this).find('ul li').hide(); 
     }); 
     $j('.4thlevel').click(function(){ 
      $j(this).children().css({"border":"1px solid red"}); 
//   $j(this).find('ul li').hide(); 
     }); 
    }); 

Но когда я нажимаю на любом уровне, следующие дети другого тега также открытие. Но я ожидаю, если я нажму на 3rdTollywood, тогда Bhooter bhabishyat должен открыть, но ни krish, ни Spiderman Пожалуйста, помогите мне.

http://jsfiddle.net/9wnqj1dz/

Answer 1

С помощью селекторов класса вы соответствие любого элемента этого класса, а не только потомки элемента, который получил щелчок. Один из способов реализации ваших потребностей - использовать jQuery.find() для фильтрации $(this) потомков.

JSFiddle here

Answer 2

Ниже кода поможет вам

 HTML: 
     <li class="1stlevel">1st-Sports 
     <ul class="ww"> 
     <li class="2ndlevel">2nd-Badminton 
      <ul> 
      </ul> 
     </li> 
     <li class="2ndlevel">2nd-Cricket 
      <ul> 
      </ul> 
     </li> 
     <li class="2ndlevel">2nd-Soccer 
      <ul> 
      </ul> 
     </li> 
     <li class="2ndlevel">2nd-Tennis 
      <ul> 
      </ul> 
     </li> 
    </ul> 

    CSS: 

    .ww 
     { 
     display:none; 
     } 

    jquery: 

     $('.1stlevel').click(function(){ 
     $('.ww').css('display','block');   
     }); 

Answer 3

Я remaned классы для _1stlevel и т.д. для этого примера, так как технически classes shouldn't begin with a digit.

Используйте .find() для выбора элементов под щелчком элемента.

$j = jQuery; 
 

 
$j('._1stlevel').click(function(){ 
 
      $j(this).find('._2ndlevel').show(); 
 
      $j(this).children().css({"border":"1px solid red"}); 
 
     }); 
 
     $j('._2ndlevel').click(function(){ 
 
      $j(this).find('._3rdlevel').show(); 
 
      $j(this).children().css({"border":"1px solid pink"}); 
 
     }); 
 
     $j('_3rdlevel').click(function(){ 
 
      $j(this).find('._4thlevel').show(); 
 
      $j(this).children().css({"border":"1px solid green"}); 
 
     }); 
 
     $j('._4thlevel').click(function(){ 
 
      $j(this).children().css({"border":"1px solid red"}); 
 
     }); 
 

._2ndlevel, ._3rdlevel, ._4thlevel { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="_0" class="set_preference"> 
 
    <li class="_1stlevel">1st-Entertainment 
 
     <ul> 
 
      <li class="_2ndlevel">2nd-Films 
 
       <ul> 
 
        <li class="_3rdlevel">3rdTollywood 
 
         <ul> 
 
          <li class="_4thlevel"> 
 
          <input type="checkbox" value="_58" name="checkChild[]" class1="checkChild css-checkbox" id="cat_58">Bhooter bhabishyat</li> 
 
         </ul> 
 
        </li> 
 
        <li class="_3rdlevel">3rdbollywood 
 
         <ul> 
 
          <li class="_4thlevel">4th<input type="checkbox" value="_60" name="checkChild[]" class1="checkChild css-checkbox" id="cat_60">krish</li> 
 
         </ul> 
 
        </li> 
 
        <li class="_3rdlevel">3rdHollywood 
 
         <ul> 
 
          <li class="_4thlevel">4th<input type="checkbox" value="_62" name="checkChild[]" class1="checkChild css-checkbox" id="cat_62">Spiderman</li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Television 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li class="_1stlevel">1st-Celebrities 
 
     <ul> 
 
      <li class="_2ndlevel">2nd-Film 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Music 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Public Life 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Sports 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Others 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-<input type="checkbox" value="_18" name="checkChild[]" class1="checkChild css-checkbox" id="cat_18">Television 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li class="_1stlevel">1st-Sports 
 
     <ul> 
 
      <li class="_2ndlevel">2nd-Badminton 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Cricket 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Soccer 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
      <li class="_2ndlevel">2nd-Tennis 
 
       <ul> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li class="_1stlevel">1st-Music 
 
     <ul> 
 
     </ul> 
 
    </li> 
 
    <li class="_1stlevel">1st-Brands 
 
     <ul> 
 
     </ul> 
 
    </li> 
 
    <li class="_1stlevel">1st-Cartoons 
 
     <ul> 
 
     </ul> 
 
    </li> 
 
</ul>