Question

我有一个关于在jquery中扩展li标签的子内容的问题。我的内容是：

<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

我为此示例将类重新设置为_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>

Answer 2

通过使用类选择器，您可以匹配该类的任何元素，而不仅仅是接收到该单击的元素的后代。实现您的需求的一种方法是使用jQuery.find()来过滤$(this)后代。

JSFiddle here

Answer 3

以下代码可以帮助您

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

jQuery show（）无法正常工作

3 个答案: