我的jQuery代码不起作用

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; 
}