टॉगल डिस्प्ले: जावास्क्रिप्ट

के साथ कोई भी शैली display: none; भाग को हटाने के लिए मैं शैली (दूसरी पंक्ति नीचे) को बदलना चाहता हूं जब उपयोगकर्ता "सभी टैग दिखाएं" लिंक पर क्लिक करता है। यदि उपयोगकर्ता फिर से "सभी टैग दिखाएं" लिंक पर क्लिक करता है, तो मुझे "शैली ..." कथन में वापस display: none; टेक्स्ट जोड़ा गया है।टॉगल डिस्प्ले: जावास्क्रिप्ट

<a href="#" title="Show Tags">Show All Tags</a> 
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

मैं यहाँ और गूगल एक उदाहरण मैं अपने स्थिति के लिए आवेदन कर सकते हैं की खोज की है। मुझे दिखाने/छिपाने के लिए 2 डीआईवी ब्लॉक का उपयोग करके कई उदाहरण मिल गए हैं। एचटीएमएल शैली तत्व को संशोधित करके, मुझे वास्तव में ऐसा करने की ज़रूरत है। क्या किसी के पास कोई उदाहरण है (या उदाहरण के लिए एक लिंक प्रदान करें) जो display: none टेक्स्ट के इस प्रकार का टॉगल करता है।

स्रोत

2011-12-10 Josh Bond

आप jQuery का उपयोग कर रहे हैं? – jQuerybeast

दें अपने ul एक id,

<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

तो

var yourUl = document.getElementById("yourUlId"); 
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';

यदि आप jQuery का उपयोग कर रहे, इस हो जाता है:

var $yourUl = $("#yourUlId"); 
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');

अंत में, आप विशेष रूप से कहा कि आप छेड़छाड़ करना चाहते थे इस सीएसएस संपत्ति को अनुकरण करें, और अंतर्निहित तत्व को न दिखाएं या छुपाएं। फिर भी मैं इसका उल्लेख करूंगा कि jQuery

$("#yourUlId").toggle();

इस तत्व को दिखाने या छिपाने के बीच वैकल्पिक होगा।

स्रोत

2011-12-10 03:17:01

-2

आप इसे सीधे जावास्क्रिप्ट और डोम के माध्यम से कर सकते हैं, लेकिन मैं वास्तव में JQuery सीखने की सलाह देता हूं। यहां एक ऐसा फ़ंक्शन है जिसका उपयोग आप उस ऑब्जेक्ट को वास्तव में टॉगल करने के लिए कर सकते हैं।

http://api.jquery.com/toggle/

संपादित करें: वास्तविक कोड जोड़ना:

समाधान:

HTML स्निपेट:

<a href="#" id="showAll" title="Show Tags">Show All Tags</a> 
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; "> 
    <li>Tag 1</li> 
    <li>Tag 2</li> 
    <li>Tag 3</li> 
    <li>Tag 4</li> 
    <li>Tag 5</li> 
</ul>

जावास्क्रिप्ट Google के सामग्री वितरण नेटवर्क से JQuery का उपयोग कर कोड: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

$(function() { 
    $('#showAll').click(function(){ //Adds click event listener 
     $('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect. 
    }); 
});

आप सीधे इस लिंक से परीक्षण कर सकते हैं: http://jsfiddle.net/vssJr/5/ JQuery पर

अतिरिक्त टिप्पणियाँ:

किसी ने सुझाव दिया है कि कुछ इस तरह के लिए JQuery का उपयोग कर गलत है, क्योंकि यह एक 50 के पुस्तकालय है । मेरे खिलाफ एक मजबूत राय है।

JQuery का व्यापक रूप से उपयोग किए जाने वाले बड़े फायदों (जैसे कई अन्य जावास्क्रिप्ट ढांचे) के कारण उपयोग किया जाता है। इसके अतिरिक्त, JQuery को सामग्री वितरण नेटवर्क (सीडीएन) द्वारा Google's CDN द्वारा होस्ट किया गया है जो गारंटी देगा कि लाइब्रेरी को क्लाइंट के ब्राउज़र में कैश किया गया है। इसका ग्राहक पर न्यूनतम प्रभाव होगा।

इसके अतिरिक्त, JQuery के साथ आप शक्तिशाली चयनकर्ताओं का उपयोग कर सकते हैं, ईवेंट श्रोता जोड़ सकते हैं, और क्रॉस-ब्राउज़र होने की गारंटी वाले अधिकांश भाग के लिए फ़ंक्शंस का उपयोग कर सकते हैं।

यदि आप एक नौसिखिया हैं और जावास्क्रिप्ट सीखना चाहते हैं, तो कृपया JQuery जैसे ढांचे को डिस्काउंट न करें। यह आपके जीवन को इतना आसान बना देगा।

स्रोत

2011-12-10 03:16:25 agarcian

यूएल एक आईडी दें और getElementById समारोह का उपयोग करें:

<html> 
<body> 
    <script> 
    function toggledisplay(elementID) 
    { 
     (function(style) { 
      style.display = style.display === 'none' ? '' : 'none'; 
     })(document.getElementById(elementID).style); 
    } 
    </script> 

<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a> 
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; "> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

</body> 
</html>

स्रोत

2011-12-10 03:36:37 marcocamejo

यह करने के लिए यह अनुशंसित और समझदार तरीका है और इसे सर्वोत्तम उत्तर के रूप में चुना जाना चाहिए। ऐसा करने के लिए आपको 50 के jQuery लाइब्रेरी की आवश्यकता नहीं है। – Rob

@Rob - जिन्होंने कहा कि आपको ऐसा करने के लिए 50 के jQuery लाइब्रेरी की आवश्यकता है? –

@AdamRackis - ऐसा करने के लिए jQuery का उपयोग करने वाले प्रत्येक व्यक्ति ने ऐसा किया। – Rob

-3

आप jQuery का उपयोग कर .css संपत्ति का उपयोग करके आसानी से कर सकते हैं ... कोशिश इस एक: http://api.jquery.com/css/

स्रोत

2011-12-10 04:25:48 kalpesh

दूसरों जवाब दे दिया है आपका सवाल पूरी तरह से, लेकिन मैंने सोचा कि मैं एक और रास्ता फेंक दूंगा। जब संभव हो तो HTML मार्कअप, सीएसएस स्टाइल और जावास्क्रिप्ट कोड को अलग करना हमेशा अच्छा विचार है। कुछ छिपाने का सबसे साफ तरीका, इसे ध्यान में रखते हुए, कक्षा का उपयोग कर रहा है। यह सीएसएस में "छिपाने" की परिभाषा को परिभाषित करने की अनुमति देता है जहां यह संबंधित है। इस विधि का उपयोग करके, आप बाद में निर्णय ले सकते हैं कि आप ul को स्क्रॉल करके छिपाने के लिए या सीएसएस transition का उपयोग करके दूर फिसलने के लिए चाहते हैं, सब कुछ आपके HTML या कोड को बदले बिना। यह लंबा है, लेकिन मुझे लगता है कि यह एक बेहतर समग्र समाधान है।

डेमो: http://jsfiddle.net/ThinkingStiff/RkQCF/

HTML:

<a id="showTags" href="#" title="Show Tags">Show All Tags</a> 
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>

सीएसएस:

#subforms { 
    overflow-x: visible; 
    overflow-y: visible; 
} 

.hide { 
    display: none; 
}

स्क्रिप्ट:

document.getElementById('showTags').addEventListener('click', function() { 
    document.getElementById('subforms').toggleClass('hide'); 
}, false); 

Element.prototype.toggleClass = function (className) { 
    if(this.className.split(' ').indexOf(className) == -1) { 
     this.className = (this.className + ' ' + className).trim(); 
    } else { 
     this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ').trim(); 
    }; 
};

स्रोत

2011-12-10 06:26:24 ThinkingStiff

'document.getElementById (' # potato ') के बारे में क्या। प्रोटोटाइप बनाने के बजाय classList.toggle (' hide ')'? – JeromeJ

@JeromeJ '.ogoggle()' जावास्क्रिप्ट फ़ंक्शन नहीं है (एक jQuery '.toggle() 'है)। इसके अलावा, '.getElementById()' हैश नोटेशन (jQuery भी) नहीं लेगा। – ThinkingStiff

हैश के बारे में कहां! हालांकि, '.toggle()' * * जावास्क्रिप्ट में मौजूद है (मैं इसे अपनी वेबसाइट पर उपयोग करता हूं) लेकिन इसका प्रभाव उसी jQuery से 'टॉगल क्लास' है, इसलिए यह jQuery के '.ogoggle () '। js विकल्पों के लिए jQuery: http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/ – JeromeJ

टॉगल डिस्प्ले: जावास्क्रिप्ट

उत्तर

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