Javascript JQuery切换类加减图标问题
我有两部《流行》和其他的,我正在使用jquery toggleClass在两个div部分之间进行slideUp和Slidedown,目前它工作正常,但当我点击popular div时,它会显示popular contents的内容,但不会将其图标更改为从负到正和从正到负,反之亦然,对于这两个div,有人能帮我解决吗谢谢 HtmlJavascript JQuery切换类加减图标问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两部《流行》和其他的,我正在使用jquery toggleClass在两个div部分之间进行slideUp和Slidedown,目前它工作正常,但当我点击popular div时,它会显示popular contents的内容,但不会将其图标更改为从负到正和从正到负,反之亦然,对于这两个div,有人能帮我解决吗谢谢 Html <div id="popular"> <div id="headerDivImg1" class="toggle1" id="popula
<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>
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");
}
.divcontainer{
background:aqua;
width:100%
}
我想这可能会有帮助 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>
Jquery
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});
非常感谢Raviteja…您的编码工作得非常好。只需一个小请求,您就可以在类div1容器的右侧放置加号/减号,并在左侧放置div name。目前,这两个都在左侧。谢谢!!!!
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});