Come utilizzare jQuery per passare tra un segno più e meno al momento della compressione ed espandere?

Sto usando il codice qui sotto. Quello che voglio fare è avere un segno + o - nella vista espansa o compressa. Come lo posso fare? Ecco il codice:Come utilizzare jQuery per passare tra un segno più e meno al momento della compressione ed espandere?

<!--//---------------------------------+ 
// 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>

fonte

2010-04-27 Autolycus

Cambiare il markup del msg_head a qualcosa come questo-

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

e modificare la funzione di commutazione a assomiglia a questo-

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

fonte

2010-04-27 20:35:04

Volevo solo sottolineare che ho qualcosa esattamente simile a questo, ma ho il mio click div utilizzando un link href. Se inserisco il tag span all'interno del tag , non funzionerà. Ho fatto un violino qui: http://jsfiddle.net/ultraloveninja/xBxa4/5/ Sono abbastanza sicuro che c'è un modo per farlo funzionare con i collegamenti href, ma volevo solo condividere da quando ho mi stavo strappando i capelli chiedendomi perché non funzionava per me. – ultraloveninja

Ho questa stessa cosa sul mio sito web. Ecco come lo faccio:

$(".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('+'); 
    } 
});

Il codice HTML simile al seguente:

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

fonte

2010-04-27 20:27:40 dclowd9901

Il modo più semplice per farlo è con lo .toggleClass(className). Usando questo metodo puoi aggiungere o rimuovere una classe da un elemento. Quindi modificare il codice per il codice (non testato) dovrebbe fare il trucco. Dovrai compensare il padding di una quantità equivalente per adattarsi ai tuoi file grafici.

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; 
}

fonte

2010-04-27 20:35:30 ahsteele

È necessario applicare '.toggleClass' a' $ (this) 'non a' .msg_head' al di fuori della funzione click. E ha bisogno di '$ ('. Msg_body'). Hide();' – Mottie

@fudgey Ho pensato che .slideToggle ha realizzato il nascondiglio per te. Ho tirato la .toggleClass all'interno dell'evento ma ho pensato che il collegamento a margherita su ".click" fosse fantastico. Per essere completamente onesto, conosco abbastanza jQuery per essere pericoloso. Quindi questa è una buona opportunità di apprendimento per me visto che non pretendo di essere un esperto, solo un curioso professionista che cerca di migliorare. ;-) – ahsteele

In realtà fa quello che pensi, ma averlo al di fuori della funzione click fa aggiungere la classe 'msg_head_expanded' mentre il messaggio era nascosto. E dopo aver fatto clic sulla testa, toggleClass non è stato richiamato di nuovo, quindi la classe 'msg_head_expanded' era sempre lì. Ad ogni modo, ti ho dato +1 perché questo è come lo farei adesso :) – Mottie

Come utilizzare jQuery per passare tra un segno più e meno al momento della compressione ed espandere?

risposta

Problemi correlati