Jquery动态加号/减号切换
Jquery动态加号/减号切换
提问于 2011-11-22 13:53:27
我使用的是jquery切换脚本。我真的希望在切换开关还没有打开的时候在标题中显示一个加号(+)，当它已经打开时显示一个减号(-)。
我之所以不使用下面的脚本，是因为我使用的当前脚本会在单击另一个切换时自动关闭一个打开的切换-这是我非常喜欢的一个功能！:)
$('#toggle-view li').click(function () {
var text = $(this).children('p');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
});
});我正在使用的脚本：
$(document).ready(function(){
$(".parents-toggle > div").click(function () {
$(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".iteminfo-toggle").slideToggle();
});
});我的html
<div class="parents-toggle">
<div class="itemheading2_toggle">Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>
有人知道如何组合加号/减号以显示在我正在使用的当前脚本中吗？^^；
以下是减号/加号切换脚本的示例：http://www.queness.com/resources/html/toggle/index.html
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-11-22 14:38:20
我是这样做的：
var parent = $('#toggle-view'), // storing main ul for use below
delay = 200; // storing delay for easier configuration
// bind the click to all headers
$('li h3', parent).click(function() {
// get the li that this header belongs to
var li = $(this).closest('li');
// check to see if this li is not already being displayed
if (!$('p', li).is(':visible'))
{
// loop on all the li elements
$('li', parent).each(function() {
// slide up the element and set it's marker to '+'
$('p', $(this)).slideUp(delay);
$('span', $(this)).text('+');
});
// display the current li with a '-' marker
$('p', li).slideDown(delay);
$('span', li).text('-');
}
});请查看http://jsfiddle.net/v9Evw/以了解它的实际效果。
要在单击时隐藏(如果当前可见)，请向click方法添加一个else：
else {
$('p', li).slideUp(delay);
$('span', li).text('+');
}请查看http://jsfiddle.net/v9Evw/1/以查看此更新。
Stack Overflow用户
发布于 2011-11-22 14:08:13
这个怎么样？
html:为符号添加跨度
<div class="parents-toggle">
<div class="itemheading2_toggle"><span class="symbol">-</span>Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>js:切换+/-符号
$(".parents-toggle > div").click(function () {
$(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".iteminfo-toggle").slideToggle();
// toggle open/close symbol
if($('.itemheading2_toggle span').text() == '-'){
$('.itemheading2_toggle span').text('+');
} else {
$('.itemheading2_toggle span').text('-');
}
});演示：http://jsfiddle.net/bg7tw/
Stack Overflow用户
发布于 2018-07-08 20:55:08
如果你使用了字体或者其他网页图标，你可以利用jQuery的hasClass并添加/删除类函数。我更喜欢这样，因为代码看起来更干净。
我更喜欢插入符号而不是加-减号。您可以改用fa-plus fa-minus
<script>
$('.reveal1').click(function(){
$('.optional-field1').toggle(200);
var child = $(this).children();
if(child.hasClass('fa-caret-down'))
child.removeClass('fa-caret-down').addClass('fa-caret-up');
else
child.removeClass('fa-caret-up').addClass('fa-caret-down');
return false;
});
</script><link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="reveal1" href="#">Toggle Expand <i class="fa fa-caret-down"></i></a>
<p class="optional-field1" style="display: none;">
Lorem Ipsum is simply dummy text
</p
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8222581
复制相关文章
相似问题
腾讯云开发者
