छिपे हुए मेरे jquery toggles कैसे शुरू करें?

मेरे पास कुछ कोड है जो प्रत्येक छवि के तहत तीन छवियों और एक संबंधित div प्रदर्शित करता है। Jquery .toggle फ़ंक्शन का उपयोग करके मैंने इसे बनाया है ताकि प्रत्येक div को टॉगल कर दिया जाए जब ऊपर की छवि क्लिक की जाती है। क्या इसे बनाने के लिए कोई रास्ता है ताकि divs छुपा के रूप में शुरू हो?छिपे हुए मेरे jquery toggles कैसे शुरू करें?

अपने समय के लिए धन्यवाद, संदर्भ के लिए

कोड:

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#picOne").click(function(){ 
$("#one").toggle(250); 


}); 

$("#picTwo").click(function(){ 
    $("#two").toggle(250); 
    }); 


    $("#picThree").click(function(){ 
    $("#three").toggle(250); 
    }); 

}); 
</script> 
</head> 

<body> 


    <center> 
    <h2>Smooth Transitions</h2> 


    <img src="one.png" id="picOne"> 
     <div id="one"> 
     <p>first paragraph.</p> 
     </div> 

    <img src="two.png" id="picTwo"> 

     <div id="two" visibility="hidden"> 
     <p>Second Pair of giraffe.</p> 
     </div> 


    <img src="three.png" id="picThree"> 

     <div id="three"> 
     <p>Thiird paragraph.</p> 
     </div> 



</center> 
</body> 
</html>

स्रोत

2011-12-27 John

visibility एक सीएसएस संपत्ति है। लेकिन प्रदर्शन क्या आप किसी भी घटना

<div id="two" style="display:none;"> 
    <p>Second Pair of giraffe.</p> 
</div>

या इनलाइन सीएसएस खाई और प्रत्येक div देने में चाहते हैं एक सीएसएस वर्ग टॉगल किया जा रहा है

<div id="two" class="initiallyHidden">

और फिर

.initiallyHidden { display: none; }

और आप अपने jQuery को थोड़ा सा भी साफ कर सकते हैं। अपने टॉगल के कारण छवियों को एक सीएसएस वर्ग

<img src="one.png" class="toggler"> 
    <div> 
    <p>first paragraph.</p> 
    </div>

और फिर

$("img.toggler").click(function(){ 
    $(this).next().toggle(250); 
});

यह उन सभी आईडी के लिए अपनी जरूरत को समाप्त होता है, और यह भी इस समाधान बहुत कुछ एक्स्टेंसिबल होगा दे।

और गतिशील रूप से जोड़ा सामग्री को संभालने के लिए, आप के बजाय on इस्तेमाल कर सकते हैं click

$(document).on("click", "img.toggler", function(){ 
    $(this).next().toggle(250); 
});

(और बेहतर प्रदर्शन के लिए, सुनिश्चित करें कि इन सभी टॉगल छवियों कुछ कंटेनर div, नाम कहते हैं, containerFoo में हैं, तो बनाना $(document).on(

स्रोत

2011-12-27 18:37:32

ब्लॉक करने के लिए बदल दिया जाएगा मेरे jQuery को साफ करने के बारे में हिस्सा पसंद आया! अधिक लचीलापन के लिए आप टॉगलर में डेटा एफ़आर का उपयोग कर सकते हैं, जैसे 'डेटा-टॉगल्स-एलिमेंट: "div-id" '। सीएसएस और कक्षा सुझाव के लिए – nitsas

के बजाय $("#containerFoo").on कर सीएसएस के साथ:

#one, #two, #three { display: none; }

jQuery

साथ

$(function() { //once the document is ready 
    $('h2').nextAll('img') //select all imgs following the h2 
    .find('div') //select all contained divs 
    .hide(); 
})

वैसे, बल्कि आईडी चयनकर्ताओं का उपयोग करने से आप शायद कक्षाओं

स्रोत

2011-12-27 18:39:55

+1। – MetalFrog

का उपयोग बस div को style="display: none;" जोड़ना चाहिए। यह div वर्ग को छुपाएगा।

जब jQuery ब्लॉक को टॉगल करता है, तो शैली को

स्रोत

2016-08-20 03:50:21

छिपे हुए मेरे jquery toggles कैसे शुरू करें?

उत्तर

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