jquery動態加號/減號符號切換

我正在使用jQuery切換腳本。當切換沒有打開時，我真的很喜歡在標題中顯示一個加號（+），而當它已經被打開時，我會喜歡減號（ - ）。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

來源

2011-11-22 Jess

以下是我想做到這一點：

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/此更新才能看到它。

來源

2011-11-22 06:38:20 JesseBuesking

哇！非常感謝你的回答！這正是我從一開始就想要的！：D：D – Jess

只是想知道，有沒有辦法讓它，以便如果你點擊當前打開切換，它也會隱藏？ ^^; – Jess

@Jess我已經更新了我的答案，以添加此。 – JesseBuesking

這個怎麼樣？

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/

來源

2011-11-22 06:08:13 marissajmc

jquery動態加號/減號符號切換

回答

相關問題