ट्विटर बूटस्ट्रैप का उपयोग करके तत्व को कैसे छिपाएं और इसे jQuery का उपयोग करके दिखाएं?


235

मान लीजिए कि मैं इस तरह एक HTML तत्व बनाता हूं,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

मैं उस HTML एलिमेंट को jQuery / जावास्क्रिप्ट से कैसे दिखा और छिपा सकता है।

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

$(function(){
  $("#my-div").show();
});

परिणाम: (इनमें से किसी के साथ)।

मैं चाहूंगा कि ऊपर के तत्व छिपे हों।

बूटस्ट्रैप का उपयोग करके तत्व को छिपाने और jQuery का उपयोग करके इसे दिखाने का सबसे सरल तरीका क्या है?


इस प्रश्न को प्रासंगिक बनाए रखने के लिए, मैंने इसे दोनों बूटस्ट्रैप पर काम करने के लिए संशोधित किया है, क्योंकि उत्तर केवल कक्षा के नाम में अंतर है।
इवान कैरोल

जवाबों:


392

सही जवाब

बूटस्ट्रैप 4.x

बूटस्ट्रैप 4.x नई .d-noneकक्षा का उपयोग करता हैइसके बजाय का उपयोग करने के लिए या तो .hidden , या .hideआप बूटस्ट्रैप 4.x उपयोग उपयोग कर रहे हैं .d-none

<div id="myId" class="d-none">Foobar</div>
  • इसे दिखाने के लिए: $("#myId").removeClass('d-none');
  • इसे छिपाने के लिए: $("#myId").addClass('d-none');
  • इसे टॉगल करने के लिए: $("#myId").toggleClass('d-none');

(फैंमिंग द्वारा टिप्पणी के लिए धन्यवाद)

बूटस्ट्रैप 3.x

सबसे पहले, का उपयोग न करें .hide! का उपयोग करें .hiddenजैसा कि दूसरों ने कहा है, .hideपदावनत किया गया है,

.हाइड उपलब्ध है, लेकिन यह हमेशा स्क्रीन पाठकों को प्रभावित नहीं करता है और v3.0.1 के रूप में पदावनत किया जाता है

दूसरा, jQuery के .toggleClass () , .addClass () और .removeClass () का उपयोग करें

<div id="myId" class="hidden">Foobar</div>
  • इसे दिखाने के लिए: $("#myId").removeClass('hidden');
  • इसे छिपाने के लिए: $("#myId").addClass('hidden');
  • इसे टॉगल करने के लिए: $("#myId").toggleClass('hidden');

सीएसएस क्लास का उपयोग न करें .show, इसमें बहुत कम उपयोग का मामला है। की परिभाषा show, hiddenऔर invisibleमें हैं डॉक्स

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

4
बहुत बहुत धन्यवाद मैं सरल जवाब के लिए लंबे समय से इस तरह से कुछ के लिए स्टैक्डओवरफ़्लो सोच रहा था। धन्यवाद
खोज परिणाम वेब परिणाम Pi

किसी को भी एक विचार है कि क्या तरीके हैं: शो () और छिपाने () तब के लिए?
चेकलिस्ट

9
तब आप इसे चेतन नहीं कर सकते (जैसे। fadeIn())। इसलिए collapseइसके बजाय कक्षा का उपयोग करें hidden। और फिर निश्चित रूप से प्रयोग करने के लिए कोई जरूरत नहीं है removeClass, addClassआदि
TheStoryCoder

2
बूटस्ट्रैप 4 के लिए आपको उपयोग करना होगा .hidden-xs-upv4-alpha.getbootstrap.com/layout/responsive-utilities/…hidden HTML5 विशेषता भी है। v4-alpha.getbootstrap.com/content/reboot/…
क्लो

1
@Kangur jQuery .hide()बूटस्ट्रैप की .hideकक्षा नहीं है। JQuery विधि ठीक काम करती है, लेकिन यह बूटस्ट्रैप तरीका नहीं है। बूटस्ट्रैप लाइब्रेरी तत्व पर .hidden वर्ग को शामिल करने पर निर्भर करती है यह निर्धारित करने के लिए कि यह वहां नहीं है। jQuery उसको नहीं जोड़ता है - जब तक आप इसे यहाँ की तरह हैक नहीं करते हैं: stackoverflow.com/a/27439371/124486 , जिस स्थिति में आप अन्य jQuery की विशिष्ट चीजों को तोड़ सकते हैं।
इवान कैरोल

65

सीधे शब्दों में:

$(function(){
  $("#my-div").removeClass('hide');
});

या यदि आप किसी तरह कक्षा अभी भी चाहते हैं:

$(function(){
  $("#my-div").css('display', 'block !important');
});

1
यहां एक jQuery प्लगइन है जो आपको .show () और .hide () को बूटस्ट्रैप 'हिडन' और 'हाइड' क्लासेस के साथ भी उपयोग करने की अनुमति देता है। gist.github.com/zimkies/8360181
zimkies

9
बूटस्ट्रैप दस्तावेज़ीकरण के अनुसार, .हाइड उपलब्ध है, लेकिन यह हमेशा स्क्रीन पाठकों को प्रभावित नहीं करता है और v5.0.1 के रूप में पदावनत किया जाता है। इसके बजाय .hidden या .sr का उपयोग करें।
bjtilley

18

.Hidden के बजाय बूटस्ट्रैप .collapse का उपयोग करें

बाद में JQuery में आप इसे हेरफेर करने के लिए .show () या .hide () का उपयोग कर सकते हैं


16

यह समाधान पदावनत है। शीर्ष मतदान समाधान का उपयोग करें।

hideकक्षा सामग्री पृष्ठ लोड पर छिपा रखने के लिए उपयोगी है।

इस के लिए मेरा समाधान आरंभीकरण के दौरान है, jquery के छिपाने के लिए स्विच करें:

$('.targets').hide().removeClass('hide');

तब show()और hide()सामान्य रूप से कार्य करना चाहिए।


1
.hide को v3.0.1 के रूप में चित्रित किया गया है
इवान कैरोल

2
ठीक है, का उपयोग करें। v3.0.1 के रूप में प्रयोग किया जाता है
डस्टिन ग्राहम

इस मामले में, जेएस के साथ छिपे होने से पहले माइक्रोसेकंड के लिए दिखाए जाने वाले सामग्री के फ़्लिकर हो सकते हैं।
सेर्गेई रोमानोव

कॉलिंग .hide () पहले डिस्प्ले लागू करता है: कोई नहीं; शैली टैग के लिए। यह हाईड क्लास को हटाने से पहले होता है। यदि आपके पास उस क्रम में है, तो यह झिलमिलाहट नहीं होनी चाहिए।
डस्टिन ग्राहम

14

इस झुंझलाहट को दूर करने का एक और तरीका यह है कि आप अपनी खुद की CSS क्लास बनाएँ, जो नियम के अंत में महत्वपूर्ण नहीं है, जैसे:

.hideMe {
    display: none;
}

और जैसे इस्तेमाल किया:

<div id="header-mask" class="hideMe"></div>

और अब jQuery छिपाना काम करता है

$('#header-mask').show();

यह बूटस्ट्रैप की कक्षाओं का उपयोग करके उत्पन्न समस्या को दरकिनार करता है। इस छोटे और सरल समाधान को क्यों कम करें?
डबिन

क्योंकि यह छोटा और सरल समाधान उस प्रश्न का उत्तर नहीं देता है जो विशेष रूप से बूटस्ट्रैव के वर्गों के उपयोग के लिए कहता है। उल्लेख नहीं है, जबकि सरल है, बूटस्ट्रैप में .h परिभाषित के रूप में परिभाषित किया गया है .hidden { display: none !important; visibility: hidden !important; }
इवान कैरोल

2
और यही समस्या है, इस सीएसएस के साथ JQuery के छिपाने और दिखाने के तरीके अच्छी तरह से काम नहीं करते हैं।
डेब्रिन

5

विधि @ डस्टिन-ग्रैहम उल्लिखित है कि मैं इसे कैसे करता हूं। यह भी याद रखें कि बूटस्ट्रैप 3 अब getbootstrap पर उनके प्रलेखन के अनुसार "छिपाना" के बजाय "छिपा हुआ" का उपयोग करता है । तो मैं कुछ ऐसा करूंगा:

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

फिर जब भी jQuery show()और hide()विधियों का उपयोग करते हैं , तो कोई संघर्ष नहीं होगा।


इतना सुंदर और सरल - आप बस एक सामान्य बूटस्ट्रैप की कमी को मात देते हैं। मैं hiddenकक्षा का उपयोग करूँगा और फिर show()jQuery में करने की कोशिश करूँगा , और कुछ भी नहीं होगा। आपका समाधान इसे इतनी आसानी से ठीक करता है, और मैंने इसके बारे में नहीं सोचा।
Volomike

5

तत्व को इस प्रकार आरंभ करें:

<div id='foo' style="display: none"></div>

और फिर, उस घटना का उपयोग करें जिसे आप इसे दिखाना चाहते हैं, जैसे:

$('#foo').show();

मुझे विश्वास है कि सबसे सरल तरीका है।


3

HTML:

<div id="my-div" class="hide">Hello, TB3</div>

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

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});

2

मुझे toggleClass का उपयोग करना पसंद है:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

यह बहुत अच्छा होगा, लेकिन switchपूरी तरह से जरूरत नहीं है।
इवान कैरोल

2
$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// आपको ईवेंट फ़ंक्शन में टॉगल को #my-div .hideन तो सेट करना है, न ही !importantपेस्ट करना है।


2

हाल ही में इस में भाग लिया जब 2.3 से 3.1 तक उन्नयन; हमारे jQuery के एनिमेशन ( स्लाइडडाउन ) टूट गए क्योंकि हम पृष्ठ टेम्पलेट में तत्वों को छिपा रहे थे । हम बूटस्ट्रैप कक्षाओं के नाम-प्रायोजित संस्करण बनाने के मार्ग पर चले गए जो अब बदसूरत- महत्वपूर्ण नियम को ले जाते हैं ।

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

3.1। समर्थन नहीं करता है।
इवान कैरोल

2

यदि आपने जो किया है उसे फिर से लिखने के लिए तैयार होने पर रेज़ का जवाब अच्छा है।

उसी परेशानी में था और निम्नलिखित के साथ काम किया:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

जब बूटस्ट्रैप इस समस्या के लिए फिक्स के साथ आता है, तो इसे फेंक दें।


1
क्या यह आवश्यक है या यह जांचने के लिए इष्टतम है कि क्या आपके पास कॉल करने से पहले कक्षा मौजूद है .removeClass()या नहीं .addClass()?
इवान कैरोल

इसके अलावा, .removeClass()पहले से ही सेट पर काम नहीं करता है ? आप बस फोन नहीं कर सकते हैं$(this).removeClass('show')
इवान कैरोल


2

अद्यतन : अब से, मैं का उपयोग करें .collapseऔर $('.collapse').show()


बूटस्ट्रैप 4 अल्फा 6 के लिए

बूटस्ट्रैप 4 के लिए आपको उपयोग करना होगा .hidden-xs-up

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

.Hidden - * - up classes तत्व को छुपाती है जब व्यूपोर्ट दिए गए ब्रेकपॉइंट या व्यापक पर होता है। उदाहरण के लिए, .hidden-md-up एक तत्व को मध्यम, बड़े और अतिरिक्त-बड़े व्यूपोर्ट पर छुपाता है।

hiddenHTML5 विशेषता भी है।

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

एचटीएमएल 5 एक नई वैश्विक विशेषता को जोड़ता है जिसका नाम [छुपाया] है, जिसे प्रदर्शन के रूप में स्टाइल किया गया है: डिफ़ॉल्ट रूप से कोई भी नहीं। प्योरसीएसएस के एक विचार को उधार लेते हुए, हम इस डिफ़ॉल्ट पर [छिपाकर] {प्रदर्शन: कोई भी नहीं! } अपने प्रदर्शन को गलती से ओवरराइड होने से रोकने में मदद करने के लिए। जबकि [छिपी] मूल रूप से IE10 द्वारा समर्थित नहीं है, हमारे सीएसएस में स्पष्ट घोषणा उस समस्या के आसपास हो जाती है।

<input type="text" hidden>

ऐसा भी है .invisibleजो लेआउट को प्रभावित करता है।

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

इनविजिबल वर्ग का उपयोग केवल किसी तत्व की दृश्यता को टॉगल करने के लिए किया जा सकता है, जिसका अर्थ है कि इसका प्रदर्शन संशोधित नहीं है और तत्व अभी भी दस्तावेज़ के प्रवाह को प्रभावित कर सकता है।


1

छिपाना और छिपाना दोनों को हटा दिया गया है और बाद में हटा दिया गया है, अब नए संस्करणों में मौजूद नहीं है। आप अपनी आवश्यकताओं के आधार पर d-none / d-sm-none / अदृश्य आदि वर्गों का उपयोग कर सकते हैं। संभावित कारण उन्हें हटा दिया गया था क्योंकि सीएसएस संदर्भ में छिपाना / छिपाना थोड़ा भ्रमित है। CSS में, छुपी (छिपी) का उपयोग दृश्यता के लिए किया जाता है, प्रदर्शन के लिए नहीं। दृश्यता और प्रदर्शन अलग-अलग चीजें हैं।

यदि आपको दृश्यता के लिए एक वर्ग की आवश्यकता है: छिपी हुई है, तो आपको दृश्यता उपयोगिताओं से अदृश्य वर्ग की आवश्यकता है।

दृश्यता और प्रदर्शन उपयोगिताओं दोनों के नीचे की जाँच करें:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/


1

बूटस्ट्रैप 4 के लिए निम्नलिखित स्निपेट का उपयोग करें, जो jQuery का विस्तार करता है:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));
  1. उपरोक्त कोड को एक फाइल में डालें। मान लीजिए "myJqExt.js"
  2. JQuery के शामिल होने के बाद फ़ाइल शामिल करें।

  3. सिंटैक्स का उपयोग करके इसका उपयोग करें

    $ () HideShow ( 'छिपाएं')।

    $ () HideShow ( 'शो')।

आशा है कि आप लोगों को यह मददगार लगेगा। :-)


0

बूटस्ट्रैप, JQuery, नामस्थान ... एक साधारण के साथ क्या गलत है:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

आप एक छोटे से सहायक समारोह बना सकते हैं, शिकायत किस:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

0

उपर्युक्त उत्तरों के आधार पर, मैंने सिर्फ अपने स्वयं के कार्यों को जोड़ा है और यह आगे उपलब्ध jquery फ़ंक्शन जैसे .h (), .show (), .toggle () के साथ संघर्ष नहीं करता है। आशा करता हूँ की ये काम करेगा।

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };

0

मैंने बूटस्ट्रैप CSS फ़ाइल को संपादित करके अपनी समस्या हल की, उनका डॉक देखें:

।छिपाना:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden वह है जिसे हम अभी उपयोग करने के लिए मान रहे हैं, लेकिन यह वास्तव में है:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

JQuery "fadeIn" "दृश्यता" के कारण काम नहीं करेगा।

इसलिए, नवीनतम बूटस्ट्रैप के लिए, .hide अब उपयोग में नहीं है, लेकिन यह अभी भी min.css फ़ाइल में है। इसलिए मैंने आईएस को छोड़ दिया और आईएस को ".हाइड" क्लास से "महत्वपूर्ण" हटा दिया (जो वैसे भी पदावनत होना चाहिए)। लेकिन आप इसे केवल अपने सीएसएस में ही ओवरराइड कर सकते हैं, मैं बस अपने सभी एप्लिकेशन को एक ही कार्य करना चाहता था इसलिए मैंने बूटस्ट्रैप सीएसएस फ़ाइल को बदल दिया।

और अब jQuery "fadeIn ()" काम करता है।

इसका कारण यह है कि मैंने ऊपर दिए गए सुझावों के विरुद्ध यह किया है, क्योंकि जब आप "removeClass ('। Hide')" ऑब्जेक्ट को तुरंत दिखाया जाता है, और आप एनीमेशन को छोड़ देते हैं :)

मुझे उम्मीद है कि इसने दूसरों की मदद की।


0

R राइटर जवाब

बूटस्ट्रैप 4 में आप तत्व को छिपाते हैं:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑 तब, निश्चित रूप से, आप इसे सचमुच दिखा सकते हैं:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

💓 लेकिन अगर आप बूटस्ट्रैप से jQuery में जिम्मेदारी हस्तांतरित करते हुए इसे शब्दार्थ तरीके से करते हैं, तो आप अन्य jQuery के नोटों का उपयोग कर सकते हैं जैसे लुप्त होती:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

-1

ट्विटर बूटस्ट्रैप सामग्री को टॉगल करने के लिए कक्षाएं प्रदान करता है, https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fdd6/less/utilities.less देखें

मैं jQuery के लिए पूरी तरह से नया हूं, और उनके डॉक्स पढ़ने के बाद मैं ट्विटर बूटस्ट्रैप + jQuery के संयोजन के लिए एक और समाधान पर आया।

सबसे पहले, किसी अन्य तत्व (वर्ग wsis- टॉगल) पर क्लिक करते समय, एक तत्व (वर्ग wsis-पतन) को 'छिपाने' और 'दिखाने' के लिए .toggle का उपयोग करना है

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

आपने पहले ही .wsis-collapseट्विटर बूटस्ट्रैप (V3) वर्ग का उपयोग करके तत्व को छिपा दिया है .hidden:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

जब आप क्लिक करते हैं .wsis-toggle, तो jQuery इनलाइन शैली जोड़ रहा है:

display: block

वजह से !importantट्विटर बूटस्ट्रैप में, इस इनलाइन शैली, कोई प्रभाव नहीं है तो हम हटाने की जरूरत .hiddenवर्ग है, लेकिन मैं सुझाव नहीं देंगे .removeClassइस के लिए! क्योंकि जब jQuery फिर से कुछ छिपाने जा रहा है, तो यह एक इनलाइन शैली भी जोड़ रहा है:

display: none

यह ट्विटर बूटस्ट्रैप के .hidden वर्ग के समान नहीं है, जिसे AT (स्क्रीन रीडर) के लिए अनुकूलित किया गया है। इसलिए, यदि हम छिपे हुए div को दिखाना चाहते हैं, तो हमें .hiddenट्विटर बूटस्ट्रैप की कक्षा से छुटकारा पाने की आवश्यकता है , इसलिए हमें महत्वपूर्ण कथनों से छुटकारा मिल जाता है, लेकिन यदि हम इसे फिर से छिपाते हैं, तो हम चाहते हैं कि .hiddenकक्षा फिर से वापस आ जाए! हम इसके लिए [.toggleClass] [3] का उपयोग कर सकते हैं।

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

इस तरह आप हर बार सामग्री छिपाए जाने के बाद छिपे हुए वर्ग का उपयोग करते रहते हैं।

.showटीबी में वर्ग वास्तव में jQuery के इनलाइन शैली के समान है, दोनों 'display: block'। लेकिन अगर .showकिसी बिंदु पर वर्ग अलग होगा, तो आप बस इस वर्ग को भी जोड़ देंगे:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});

@ EvanCarroll, यह जटिल क्यों है? मैं आपके उत्तर को भी पढ़ रहा हूं और मैं देखता हूं कि आप टॉगलक्लास का उपयोग करने का सुझाव देते हैं जो मैं भी करता हूं, इसलिए मुझे आपकी टिप्पणी समझ में नहीं आती है।
user2312234
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.