jquery手风琴切换的加号-减号
Plus-minus symbol of toggle for jquery accordion
我想在切换时向查询手风琴添加加号和减号。该符号折叠时应为加号,展开时应为减号。我试着在各种帖子上搜索,但都找不到。我根本不知道jquery。任何帮助都将不胜感激。你可以在这个链接上找到工作代码:
http://www.bootply.com/X3tSn83qU1
您可以添加一个图标并切换该类以更改图像
$(document).ready(function() {
$(".accordion li:has(ul) > div").prepend('<i class="glyphicon glyphicon-minus" />')
$(".accordion > li > div").click(function(e) {
if ($(e.target).is('input')) { //if clicked on input element don't do anything
return
}
$('.active').not(this).removeClass('active').next().slideUp(300);
$(this).toggleClass('active');
var $next = $(this).next().slideToggle(300);
var $ico = $(this).find('i.glyphicon').toggleClass('glyphicon-plus glyphicon-minus')
if (false == $(this).next().is(':visible')) {
$('.accordion > ul').not($next).slideUp(300);
$('.accordion i.glyphicon').not($ico).addClass('glyphicon-plus').removeClass('glyphicon-plus');
}
});
$('li :checkbox').on('click', function() {
var $chk = $(this),
$li = $chk.closest('li'),
$ul, $parent;
if ($li.has('ul')) {
$li.find(':checkbox').not(this).prop('checked', this.checked);
}
do {
$ul = $li.parent();
$parent = $ul.siblings(':checkbox');
if ($chk.is(':checked')) {
$parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
} else {
$parent.prop('checked', false)
}
$chk = $parent;
$li = $chk.closest('li');
} while ($ul.is(':not(.someclass)'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<ul class="accordion">
<li class="js_slider">
<div>
<input type="checkbox"><a href="#">North America</a>
</div>
<ul class="accordion">
<li class="js_slider">
<div>
<input type="checkbox"><a href="#">Canada</a>
</div>
</li>
<li class="js_slider">
<div>
<input type="checkbox"><a href="#">United States of America</a>
</div>
<ul class="accordion">
<li>
<div>
<input type="checkbox"><a href="#">Alabama</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Alaska</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Florida</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Georgia</a>
</div>
</li>
</ul>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Texas</a>
</div>
<ul class="accordion">
<li>
<div>
<input type="checkbox"><a href="#">Austin</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Dallas</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Irving</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Houston</a>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Latin America</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Europe,Middle <br> East and Africa</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Asia Pacific</a>
</div>
</li>
</ul>
<br>
<br>
<br>
<ul class="accordion">
<li>
<div>
<input type="checkbox"><a href="#">North America</a>
</div>
<ul class="accordion">
<li>
<div>
<input type="checkbox"><a href="#">United States of America</a>
</div>
<ul class="accordion">
<li>
<div>
<input type="checkbox"><a href="#">Manager 1</a>
</div>
<ul class="accordion">
<li>
<div>
<input type="checkbox"><a href="#">Alabama</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Alaska</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Florida</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Georgia</a>
</div>
</li>
<li>
<div>
<input type="checkbox"><a href="#">Illinois</a>
</div>
</li>
</ul>
</li>
<li>
<div>
<input type="checkbox">Manager 2</div>
</li>
<li>
<div>
<input type="checkbox">Manager 3</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
相关文章:
- 手风琴可点击并悬停
- 响应动画手风琴不工作
- JS代码中的减号
- 如何只使用特定的表行构建简单的手风琴
- JQuery-停止手风琴链接关闭所有选项卡
- 如何设置第一个手风琴面板关闭
- 获得多个手风琴部分以保持开放
- 手风琴菜单打开和关闭
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 在for循环中仅创建手风琴的内容
- 我怎么能同时去锚定并打开Bootstrap手风琴呢
- Bootstrap折叠手风琴一个面板打开,所有其他面板关闭
- 如果一个手风琴发出咔嗒声,如何最大限度地减少其他手风琴
- 在PDF中查看时,我的行中出现换行.(添加减号时)
- jquery手风琴切换的加号-减号
- 如何更改带有加号和减号的手风琴标题
- jquery手风琴不显示箭头或加号/减号
- 启动引导手风琴与减号在活动
- 如何添加一个加号或减号手风琴在引导?手风琴关闭时显示加号,手风琴打开时显示减号
- 如何使用jquery向基本手风琴添加加号和减号