Question

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

Answer 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：toggle +/- symbol

$(".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/

Answer 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 {
        $('p', li).slideUp(delay);
        $('span', li).text('+');  
    }

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

Answer 3

如果您使用fontawesome或任何其他Web图标，则可以利用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

Jquery动态加/减符号切换

3 个答案: