Question

我在尝试使用一组简单的可扩展内容区域时遇到了一些麻烦。如果您点击“项目管理课程”，然后点击兄弟（例如“IT课程”），则应关闭“项目管理课程”并打开“IT课程”。

这在嵌套时也需要工作（即兄弟姐妹关闭，然后打开所选的一个。任何帮助都赞赏！

HTML

<span class="ui-expand-bar large icon person"><span class="head">Project Management Courses</span></span>
            <div class="content">
                <span class="ui-expand-bar small"><span class="head">Adobe</span></span>
                <div class="content">
                    <table class="plain bullet course-categories">
                        <tr>
                            <td style="width:45%;">Microsoft Excel Level 1</td>
                            <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td>
                            <td style="width:30%;"><a href="#">View online detail</a></td>
                            <td style="width:10%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td>
                        </tr>
                        <tr>
                            <td style="width:45%;">Microsoft Excel Level 1</td>
                            <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td>
                            <td style="width:25%;"><a href="#">View online detail</a></td>
                            <td style="width:15%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td>
                        </tr>
                        <tr>
                            <td style="width:45%;">Microsoft Excel Level 1</td>
                            <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td>
                            <td style="width:25%;"><a href="#">View online detail</a></td>
                            <td style="width:15%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td>
                        </tr>
                        <tr>
                            <td style="width:45%;">Microsoft Excel Level 1</td>
                            <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td>
                            <td style="width:25%;"><a href="#">View online detail</a></td>
                            <td style="width:15%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td>
                        </tr>
                    </table>
                </div>
                <span class="ui-expand-bar open small"><span class="head">Microsoft</span><span class="ui-link-minus">Close</span></span>
            </div>
            <span class="ui-expand-bar large icon computer"><span class="head">IT Courses</span></span>
            <span class="ui-expand-bar large icon cog"><span class="head">Business Skills Courses</span></span>
            <span class="ui-expand-bar large icon person"><span class="head">ELC Re-Settlement Courses</span></span>
            <span class="ui-expand-bar large icon sliders"><span class="head">On-line training Courses</span></span>

的jQuery

$('.ui-expand-bar').click(function(event) {
        $this = $(this);
        $this.siblings().find('.content').stop().slideUp('200');
        $this.siblings().removeClass('open');        

        if(!$this.hasClass('open')){
            $this.siblings('.ui-expand-bar').find('.content').stop().slideUp('200');
            $this.addClass('open');
            $this.next('.content').stop().slideDown('200');
        }
    });

Answer 1

这是你想要的

代码：

   $('.ui-expand-bar').click(function(event) {
    $this = $(this);
    if($(this).parent('.content').length == 0){    
    $('.content').stop().slideUp('200');
    $this.next('.content').stop().slideToggle('200');
    }else{
     $this.next('.content').stop().slideToggle('200');
    }
    });

Jsfiddle http://jsfiddle.net/krunalp1993/BfuZc/3/

希望它可以帮助你：）

Answer 2

看看这个：

$('.ui-expand-bar').click(function(event) {
        $this = $(this);
        //if this not open
        if(!$this.hasClass('open')){
            //close all other siblings
            $this.siblings('.open').removeClass('open');
            $this.siblings('.content').stop().slideUp('200');
            //open this
            $this.addClass('open');
            $this.next('.content').stop().slideDown('200');
        }
        else {
            //thisis open, close it
            $this.removeClass('open');
            $this.next('.content').stop().slideUp('200');
        }
    });

http://jsfiddle.net/BfuZc/4/ 我修改了html和js

简单嵌套可扩展栏（jQuery）

2 个答案: