如何使用jQuery在摺疊和展開時在加號和減號之間切換？

我使用下面的代碼。我想要做的是有一個+或-登錄展開或摺疊視圖。我怎樣才能做到這一點？這裏是代碼：如何使用jQuery在摺疊和展開時在加號和減號之間切換？

<!--//---------------------------------+ 
// Developed by Roshan Bhattarai | 
// http://roshanbh.com.np   | 
// Fell Free to use this script | 
//---------------------------------+--> 
<title>Collapsible Message Panels</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //hide the all of the element with class msg_body 
    $(".msg_body").show(); 
    //toggle the componenet with class msg_body 
    $(".msg_head").click(function(){ 
     $(this).next(".msg_body").slideToggle(100); 
    }); 
}); 
</script> 
<style type="text/css"> 
body { 
    margin: 10px auto; 
    width: 570px; 
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif; 
} 
p { 
    padding: 0 0 1em; 
} 
.msg_list { 
    margin: 0px; 
    padding: 0px; 
    width: 383px; 
} 
.msg_head { 
    padding: 5px 10px; 
    cursor: pointer; 
    position: relative; 
    background-color:#FFCCCC; 
    margin:1px; 
} 
.msg_body { 
    padding: 5px 10px 15px; 
    background-color:#F4F4F8; 
} 
</style> 
</head> 
<body> 
<div align="center"> 
    <p>Click on the each news head to toggle 
</p> 

</div> 
<div class="msg_list"> 
     <p class="msg_head">Header-1 </p> 
     <div class="msg_body"> 
      orem ipsum dolor sit amet 
     </div> 

     <p class="msg_head">Header-2</p> 
     <div class="msg_body"> 
      consectetuer adipiscing elit orem ipsum dolor sit amet 
     </div> 
</div> 
</body> 
</html>

來源

2010-04-27 Autolycus

更改msg_head的標記來像這個 -

<p class="msg_head">Header-1 <span>[-]</span></p>

，改變切換功能看起來像這 -

$(".msg_head").click(function(){ 
    $(this).next(".msg_body").slideToggle(100); 
}) 
.toggle(function() { 
    $(this).children("span").text("[+]"); 
}, function() { 
    $(this).children("span").text("[-]"); 
});

來源

2010-04-27 20:35:04

我只是想指出，我有完全與此類似，但我有使用HREF鏈接我的點擊股利。如果我將span標籤放在標籤內，它將不起作用。我在這裏做一個小提琴： http://jsfiddle.net/ultraloveninja/xBxa4/5/ 我敢肯定有一種方法，使其與HREF環節的工作，但我只是想，因爲我分享拉着我的頭髮，想知道爲什麼它不適合我。 – ultraloveninja 2012-08-28 19:16:06

我在自己的網站上有這個東西。下面是我如何做到這一點：

$(".question").click(function() { 
    if ($(this).next(".answer").is(":hidden")) { 
     $(this).next(".answer").slideDown("slow"); 
     $(this).children('span').text('-'); 
    } else { 
     $(this).next(".answer").slideUp("slow"); 
     $(this).children('span').text('+'); 
    } 
});

的HTML看起來像這樣：

<div class="question"> 
    <span>+</span>blahblah 
</div> 
<div class="answer">blahblah</div>

來源

2010-04-27 20:27:40 dclowd9901

最簡單的方法是使用.toggleClass(className)。使用這種方法，你可以添加或從元素中刪除一個類。所以修改你的代碼到下面的（未經測試的）代碼應該可以做到。你會想要補償等量的填充以適合你的圖形文件。

的JavaScript

$(".msg_head").click(function() { 
    $(this).next(".msg_body").slideToggle(100); 
    $(this).toggleClass('msg_head_expanded'); 
});

CSS

.msg_head 
{ 
    padding: 5px 10px; 
    cursor: pointer; 
    position: relative; 
    background:#FFCCCC url('plus.png') no-repeat 0 50; 
    margin:1px; 
} 

.msg_head_expanded 
{ 
    background:#FFCCCC url('minus.png') no-repeat 0 50; 
}

來源

2010-04-27 20:35:30 ahsteele

您需要將'.toggleClass'應用於'$（this）'而不是單擊函數外的'.msg_head'。它需要'$（'。msg_body'）。hide（）;' – Mottie 2010-04-27 20:53:45

@fudgey我認爲.slideToggle完成了對你的隱藏。我已經把事件中的.toggleClass拉出來了，但我認爲菊花鏈接到'.click'上很酷。說實話，我知道足夠的jQuery是危險的。所以這對我來說是一個很好的學習機會，因爲我不認爲自己是專家，只是一個好奇的專業人士，希望改進。 ;-) – ahsteele 2010-04-27 21:04:02

實際上，它確實按照您的想法進行了操作，但將它放在點擊功能之外使其在隱藏消息時添加了「msg_head_expanded」類。點擊頭部後，toggleClass不會再被調用，所以'msg_head_expanded'類總是在那裏。無論如何，我給你+1，因爲這是我現在要做的:) – Mottie 2010-04-27 22:50:47

如何使用jQuery在摺疊和展開時在加號和減號之間切換？

回答

相關問題