Question

我想用这段代码切换这么多div个。一个div打开一次，但我不知道为什么这不起作用..

HTML：

<a href="#" id="test" class="bitcon"></a>
<div class="hide-show"></div>

jQuery的：

var test = $('#test'),
    a = $('div').find('a');

console.log(a.hasClass('active'));

test.click(function(e) {
    e.preventDefault();
    var $this = $(this),
        speed = 500;
    if ($this.hasClass('active') === true) {
        $this.removeClass('active').next('.hide-show').slideUp(speed);
    } else if (a.hasClass('active') === false) {
        $this.addClass('active').next('.hide-show').slideDown(speed);
    } else {
        a.removeClass('active').next('.hide-show').slideUp(speed);
        $this.addClass('active').next('.hide-show').delay(speed).slideDown(speed);
    }
});

CSS：

.hide-show {
     display:none;
}

Answer 1

不太确定你在问什么，但我认为这就是你要找的东西：

var test = $('#test'),
    a = $('a');

a.click(function(e) {
    e.preventDefault();
    var $this = $(this),
        speed = 500;
    $this.next('.hide-show').slideToggle(speed);
});

Answer 2

http://jsfiddle.net/jkgmdmvs/2/

HTML：

<div id="divWrapper">
    <a href="#" class="bitcon">header 1</a>
    <div class="hide-show">
        <h3>div#1 content</h3>
    </div>
    <hr />
    <a href="#" class="bitcon">header 2</a>
    <div class="hide-show">
        <h3>div#2 content</h3>
    </div>
    <hr />
    <a href="#" class="bitcon">header 3</a>
    <div class="hide-show">
        <h3>div#3 content</h3>
     </div>
 </div>

JS：

$(document).ready(function(){

    $('.bitcon').click(function(){
        $('.hide-show').hide();
        $('.bitcon').removeClass('active-header');
        var anchElement=$(this);
        var divElement= anchElement.next();
        divElement.slideToggle();
        anchElement.addClass('active-header');
    });

});

CSS：

.hide-show {
     display:none;
}
.active-header{
    background-color:yellow;
}

我的jQuery代码不起作用

2 个答案: