JQuery切换类加号和减号图标问题

Question

我有两个Div与热门和其他人，我使用jQuery的toggleClass为两个div部分之间的slideUp和Slidedown目前其工作正常，但是当我点击流行的div它显示的内容受欢迎的内容，但不改变它的图标与减去加和加减反之亦然这两个divs有人可以帮我解决它谢谢！

http://jsfiddle.net/v9Evw/352/

的Html

<div id="popular"> 

    <div id="headerDivImg1" class="toggle1" id="popular_img" style='background:#4c97d0;height:30px;width:640px;'> 
     <span style='color:#fff;padding-left:10px;line-height:30px;'>DIV1</span> 
     <a class="toggle1" style='float:right;' id="popular_img" href="javascript:popular('popular_content', 'popular_img');"> 

     </a> 
    </div> 
    <div id="popular_content" class="content" style="display: block;"> 
     <p>welcome to Div1</p> 
    </div> 

</div> 

<br/> 

<div id="others"> 

    <div id="headerDivImg1" id="other_img" class="toggle2" style='background:#4c97d0;height:30px;width:640px;'> 
     <span style='color:#fff;padding-left:10px;line-height:30px;'>DIV2</span> 
     <a class="toggle2" style='float:right;' id="other_img" href="javascript:popular('popular_content', 'popular_img');"> 

     </a> 
    </div> 
    <div id="other_content" class="content" style="display: block;"> 
     <p>welcome to Div2</p> 
    </div> 

</div> 

JQUERY

$(document).ready(function() 
{ 
    var $content = $("#popular_content").show(); 
    $(".toggle1").on("click", function(e) 
    { 
     $(this).toggleClass("expanded"); 
     $content.slideToggle(); 
    }); 
}); 

$(document).ready(function() 
{ 
    var $content = $("#other_content").hide(); 
    $(".toggle2").on("click", function(e) 
    { 
     $(this).toggleClass("expanded"); 
     $content.slideToggle(); 
    }); 
}); 

CSS

.toggle1 
{ 
    display:inline-block; 
    height:27px; 
    width:41px; background:url("minus.png"); 

} 
.toggle1.expanded 
{ 
    background:url("plus.png"); 
} 


.toggle2 
{ 
    display:inline-block; 
    height:27px; 
    width:41px; background:url("plus.png"); 

} 
.toggle2.expanded 
{ 
    background:url("minus.png"); 
} 

Answer 1

我想这可能帮助

HTML

<div class="div1container"> 
     <div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo">Div1</div> 

    <div id="demo" class="collapse"> 
    Div 1 Content 
    </div> 
    </div> 
    <div class="div2container"> 
    <div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo2">Div2</div> 

    <div id="demo2" class="collapse"> 
    Div 2 Content 
    </div> 
     </div> 

CSS

.divcontainer{ 
    background:aqua; 
    width:100% 
} 

jQuery的

$(document).ready(function() { 
    $('.glyphicon-plus').click(function() { 
     $(this).parent("div").find(".glyphicon-plus") 
      .toggleClass("glyphicon-minus"); 
    }); 
});