पतन और विस्तार पर प्लस और ऋण चिह्न के बीच स्विच करने के लिए 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

बदलें इस-

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

की तरह कुछ करने के लिए msg_head की मार्कअप और करने के लिए टॉगल समारोह बदल इस तरह दिखें-

$(".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 लिंक का उपयोग div है चाहता था। अगर मैं टैग के भीतर अवधि टैग डालता हूं, तो यह काम नहीं करेगा। मैं एक बेला यहां की गईं: http://jsfiddle.net/ultraloveninja/xBxa4/5/ मैं बहुत यकीन है कि वहाँ यह href लिंक के साथ काम करने के लिए एक रास्ता है, लेकिन मैं अभी के बाद से मैं साझा करना चाहते थे मेरे बालों को यह सोचकर बाहर खींच रहा था कि यह मेरे लिए क्यों काम नहीं कर रहा था। – ultraloveninja

मेरे पास यह अपनी वेबसाइट पर बहुत कुछ है। यहां बताया गया है कि मैं यह कर:

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

एचटीएमएल इस तरह दिखता है:

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

स्रोत

2010-04-27 20:27:40 dclowd9901

ऐसा करने का सबसे आसान तरीका .toggleClass(className) के साथ है। इस विधि का उपयोग करके आप किसी तत्व से कक्षा को जोड़ या निकाल सकते हैं। इसलिए नीचे दिए गए (अवांछित) कोड में अपना कोड संशोधित करने से चाल चलनी चाहिए। आप अपनी ग्राफिक फ़ाइलों को फिट करने के लिए पैडिंग को बराबर राशि से ऑफसेट करना चाहते हैं।

जावास्क्रिप्ट

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

सीएसएस

.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

आपको '$ (this) 'पर क्लिक करने के लिए अपने' .toggleClass' को क्लिक फ़ंक्शन के बाहर' .msg_head' 'की आवश्यकता नहीं है। और इसे '$ ('। Msg_body') की आवश्यकता है। छुपाएं();' – Mottie

@ फ़ूजी मैंने सोचा था कि .slideToggle ने आपके लिए छुपाया है। मैंने घटना के अंदर .toggleClass खींच लिया है, लेकिन मैंने सोचा था कि डेज़ी इसे '.click' पर चेन कर रहा था। पूरी तरह से ईमानदार होने के लिए मुझे खतरनाक होने के लिए पर्याप्त jQuery पता है। तो यह मेरे लिए एक अच्छा सीखने का अवसर है क्योंकि मैं एक विशेषज्ञ होने का दावा नहीं करता हूं, बस एक जिज्ञासु पेशेवर सुधारने की तलाश में है। ;-) – ahsteele

असल में यह आपके द्वारा किए गए कार्यों को करता है, लेकिन क्लिक फ़ंक्शन के बाहर होने से संदेश छिपा हुआ होता है, तो इसे 'msg_head_expanded' क्लास जोड़ दिया जाता है। और सिर पर क्लिक करने के बाद, टॉगल क्लास को फिर से नहीं बुलाया गया था, इसलिए 'msg_head_expanded' कक्षा हमेशा वहां थी। वैसे भी, मैंने आपको +1 दिया क्योंकि इस तरह मैं अब यह करूँगा :) – Mottie

पतन और विस्तार पर प्लस और ऋण चिह्न के बीच स्विच करने के लिए jQuery का उपयोग कैसे करें?

उत्तर

संबंधित मुद्दे