JQuery切换类加号和减号图标问题
JQuery Toggle Class Plus and minus icon issue
我有两个div与流行和其他人,我在两个div部分之间使用jquery toggleClass进行slideUp和Slidedown,目前运行良好,但当我单击流行div时,它显示流行内容的内容,但不会将其图标更改为减号为加号和加号为减号,反之亦然。对于这两个div,有人能帮我解决吗?谢谢!
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>
查询
$(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");
}
我认为这可能有助于
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");
});
});
相关文章:
- 在指令控制器中使用$attrs时出现问题
- Javascript更改图标
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 我的jQuery插件参数没有正确启动,遇到了问题
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- TableExport jquery插件:文件名和扩展名问题
- JavaScript Pub/Sub属性访问问题
- 单击更改图标并通过javascript添加一个css类
- 单击时切换上下图示符图标的问题
- 图标不会显示,似乎是 webpack 的问题
- 修复加载2 Favicon或Tab图标的问题
- 在加载自定义标记图标时出现问题
- JQuery切换类加号和减号图标问题
- 在视网膜显示器上使用jquery移动数据图标的问题
- Jquery移动浮动:左问题,标题图标块页面的左侧
- 有问题旋转facebook, twitter和youtube图标图像
- ExtJS Quicktip图标CSS问题