phpstudy集成环境

 首页 > JQUERY如何控制多个相同CLASS其中一个

JQUERY如何控制多个相同CLASS其中一个

<div class="box">
    <div class="item-name">我是名称**1**</div>
    <div class="item-list">
        <ul>
            <li><a href="#">内容1</a></li>
            <li><a href="#">内容2</a></li>
            <li><a href="#">内容3</a></li>
            <li><a href="#">内容4</a></li>
            <li><a href="#">内容5</a></li>
            <li><a href="#">内容6</a></li>
        </ul>
    </div>
    <div class="item-name">我是名称**2**</div>
    <div class="item-list">
        <ul>
            <li><a href="#">内容1</a></li>
            <li><a href="#">内容2</a></li>
            <li><a href="#">内容3</a></li>
        </ul>
    </div>
    <div class="item-name">我是名称**3**</div>
    <div class="item-list">
        <ul>
            <li><a href="#">内容1</a></li>
            <li><a href="#">内容2</a></li>
            <li><a href="#">内容3</a></li>
            <li><a href="#">内容4</a></li>
            <li><a href="#">内容5</a></li>
        </ul>
    </div>
</div>

以上是HTML结构，如何让每个UL里的LI只显示一个内容1，并插入一个按钮或链接（就是点击显示），点击该按钮只显示当前点击区域内的内容2-内容N？请问如何用JQUERY来实现呢？（HTML结构中的LI有多有少，不固定的！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="script/jquery_2_1_3/jquery-2.1.3.min.js"></script>
    <title>Title</title>
    <script>
        $(function(){
            $('div.box div.item-list ul li:not(:first-child)').hide();
            $('div.box div.item-list ul li:first-child')
                    .append('<button class="btshowen">显示</button>')
                    .find("button").on('click', function (e) {


                if($(this).hasClass("btshowen")){
                    $(this).removeClass("btshowen");
                    $(this).text('隐藏');
                }else{
                    $(this).addClass("btshowen");
                    $(this).text('显示');
                }
                $(this).parent().nextAll().toggle();
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <div class="item-name">我是名称**1**</div>
        <div class="item-list">
            <ul>
                <li><a href="#">内容1</a></li>
                <li><a href="#">内容2</a></li>
                <li><a href="#">内容3</a></li>
                <li><a href="#">内容4</a></li>
                <li><a href="#">内容5</a></li>
                <li><a href="#">内容6</a></li>
            </ul>
        </div>
        <div class="item-name">我是名称**2**</div>
        <div class="item-list">
            <ul>
                <li><a href="#">内容1</a></li>
                <li><a href="#">内容2</a></li>
                <li><a href="#">内容3</a></li>
            </ul>
        </div>
        <div class="item-name">我是名称**3**</div>
        <div class="item-list">
            <ul>
                <li><a href="#">内容1</a></li>
                <li><a href="#">内容2</a></li>
                <li><a href="#">内容3</a></li>
                <li><a href="#">内容4</a></li>
                <li><a href="#">内容5</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

如果是这么明确的需求，用:first-child伪类选择就好了。

css

.item-list li {
    display: none;
}

.item-list li:first-child {
    display: '';
}

js

$('.item-list li:first-child').click((ele) => {
    $(ele).nextAll().toggle()
})

好久不写jQuery代码了，不知道jQuery语法对不对，不过大致就是这个思路，供参考。

不需要考虑相同的class怎么处理，
直接想象相同class里面的东西怎么处理，用$(this)可指代当前的对象

這樣是您要的嗎？示範 / Codepen 完整版

原碼如下

$(function () {
    $('.item-list > ul li:not(:first-child)').hide();
  $('.item-list > ul li:first-child').on('click', function (e) {
      e.preventDefault();
    $(this).find('+ li:not(:first-child)').toggle();
  });
});

选择器 :nth-child(n) (>=1)
或者
.eq(n) (>=0)

你可以让.item-list下的所有li都隐藏掉hide,然后让。.item-list下的第一个li显示，然后增加一个点击事件，获取当前点击.item-list的位置（index）,让对应.item-list下的li都显示就可以了。

【热门文章】
【热门文章】