Question

我对以下代码有一点问题，如果您点击某个链接，我希望它能够打开，如果您点击另一个链接，那么任何已打开的代码都会在新代码打开之前关闭。

HTML：

<a href="#" id="link_1" class="expandCourse">test link 1</a>
<div class="link_1" style="display:none;">content here</div>

<a href="#" id ="link_2" class="expandCourse">test link 2</a>
<div class="link_2" style="display:none;">content here</div>

<a href="#" id="link_3" class="expandCourse">test link 3</a>
<div class="link_3" style="display:none;">content here</div>

JS：

$('.expandCourse').on('click',function() {
    var courseID = $(this).attr('ID');
    $(this).addClass('active');
    $("."+courseID).slideToggle('slow', function() {
        if ($('.expandCourse').hasClass('active')){
            $("."+courseID).slideUp();
            $(this).removeClass('active');
        } else {
            $("."+courseID).slideDown();
            $(this).addClass('active');
        }
    }); 
    return false;
});

JS小提琴：http://jsfiddle.net/znFmc/18/

提前感谢您提供任何帮助

Answer 1

$('.expandCourse').on('click',function() {
    if (!$(this).hasClass('active')) { 
        $('.expandCourse').removeClass('active')
        var courseID = $(this).attr('ID');
        $(this).addClass('active');
        $('.content').slideUp('slow', function() {
            $("."+courseID).slideDown('slow');
        });
    }
});

JSFIDDLE

slideToggle单击链接时上下滑动

1 个答案: