Jquery动态加/减符号切换答案

【问题标题】：Jquery dynamic plus/minus symbol toggleJquery动态加/减符号切换
【发布时间】：2011-11-22 05:53:26
【问题描述】：

我正在使用 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

【问题讨论】：

标签： jquery toggle

【解决方案1】：

这个怎么样？

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/

【讨论】：

【解决方案2】：

我会这样做：

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/ 以了解它的实际效果。

如果当前可见，要在点击时隐藏，请在点击方法中添加一个 else：

    else {
        $('p', li).slideUp(delay);
        $('span', li).text('+');  
    }

查看 http://jsfiddle.net/v9Evw/1/ 以查看此更新。

【讨论】：

哇！非常感谢您的回答！这正是我从一开始就想要的！ :D :D
只是想知道，有没有办法让它，如果你点击当前打开的切换，它也会隐藏？ ^^;

【解决方案3】：

如果您使用 fontawesome 或任何其他 web 图标，您可以利用 jQuery 的 hasClass 和添加/删除类功能。我更喜欢这个，因为代码看起来更干净。

我更喜欢插入符号而不是加减号。你可以改用fa-plusfa-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

【讨论】：