开发者社区> 问答> 正文

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有多有少,不固定的!)

展开
收起
小旋风柴进 2016-05-30 13:59:46 2434 0
1 条回答
写回答
取消 提交回答
  • <!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>
    2019-07-17 19:20:29
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
Javascript中的对象 立即下载
编程语言如何演化—— 以 JS 的 private 为例 立即下载
编程语言如何演化-以JS的private为例 立即下载