สมมติว่าฉันสร้างองค์ประกอบ 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 / Javascript ได้อย่างไร

JavaScript:

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

ผลลัพธ์: (กับสิ่งเหล่านี้)

ฉันต้องการซ่อนองค์ประกอบด้านบน

วิธีที่ง่ายที่สุดในการซ่อนองค์ประกอบโดยใช้ Bootstrap และแสดงโดยใช้ jQuery คืออะไร

คำตอบที่ถูกต้อง

Bootstrap 4.x

Bootstrap 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');

(ขอบคุณความคิดเห็นโดย Fangming)

Bootstrap 3.x

ก่อนอื่นอย่าใช้.hide! ใช้ .hiddenอย่างที่คนอื่น ๆ พูดกัน.hideแล้วเลิกใช้แล้ว

. leather พร้อมใช้งาน แต่จะไม่ส่งผลกระทบต่อโปรแกรมอ่านหน้าจอเสมอไปและเลิกใช้แล้วตั้งแต่ v3.0.1

ขั้นที่สองใช้ jQuery's .toggleClass () , .addClass ()และ . removeClass ()

<div id="myId" class="hidden">Foobar</div>

• ในการแสดง: $("#myId").removeClass('hidden');
• ในการซ่อน: $("#myId").addClass('hidden');
• หากต้องการสลับ: $("#myId").toggleClass('hidden');

อย่าใช้คลาส css .showมีกรณีใช้งานน้อยมาก คำจำกัดความของshow, hiddenและinvisibleอยู่ในเอกสาร

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

เพียง:

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

หรือถ้าคุณต้องการให้ชั้นเรียนยังคงอยู่:

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

ใช้ bootstrap .collapse แทน. hidden

ในภายหลังใน JQuery คุณสามารถใช้. show () หรือ. leather () เพื่อจัดการมันได้

โซลูชันนี้เลิกใช้แล้ว ใช้โซลูชันที่ได้รับคะแนนสูงสุด

hideระดับเป็นประโยชน์ในการให้เนื้อหาที่ซ่อนอยู่ในการโหลดหน้า

วิธีแก้ปัญหาของฉันคือในระหว่างการเริ่มต้นเปลี่ยนไปซ่อนของ jquery:

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

จากนั้นshow()และhide()ควรทำงานตามปกติ

อีกวิธีหนึ่งในการจัดการกับความรำคาญนี้คือการสร้างคลาส CSS ของคุณเองซึ่งไม่ได้ตั้ง!! สำคัญเมื่อสิ้นสุดกฎเช่นนี้

.hideMe {
    display: none;
}

และใช้เช่นนั้น:

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

และตอนนี้ jQuery กำลังซ่อนการทำงานอยู่

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

วิธีการ @ dustin-graham ที่ระบุไว้คือฉันก็ทำเช่นกัน จำได้ว่าบูต 3 ตอนนี้ใช้ "ซ่อน" แทน "ซ่อน" ตามเอกสารของพวกเขาที่getbootstrap ดังนั้นฉันจะทำสิ่งนี้:

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

จากนั้นเมื่อใดก็ตามที่ใช้ jQuery show()และhide()เมธอดจะไม่มีข้อขัดแย้ง

เริ่มองค์ประกอบด้วยเช่น:

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

จากนั้นใช้เหตุการณ์ที่คุณต้องการแสดงเช่น:

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

ฉันเชื่อว่าวิธีที่ง่ายที่สุด

HTML:

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

javascript:

$(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();
});

ฉันชอบใช้ toggleClass:

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

$(function(){

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

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

})

// คุณไม่จำเป็นต้องตั้งค่า#my-div .hideหรือ!importantเพียงแค่วาง / สลับสลับซ้ำในฟังก์ชันเหตุการณ์

เมื่อเร็ว ๆ นี้พบว่าเมื่ออัพเกรดจาก 2.3 เป็น 3.1; ภาพเคลื่อนไหว jQuery ของเรา ( slideDown ) พังเนื่องจากเราใส่ซ่อนองค์ประกอบในเทมเพลตหน้า เราไปตามเส้นทางของการสร้างคลาส Bootstrap รุ่นที่เว้นวรรคซึ่งตอนนี้มีกฎสำคัญที่น่าเกลียด

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

คำตอบของ Razz นั้นดีถ้าคุณยินดีที่จะเขียนสิ่งที่คุณทำ

อยู่ในปัญหาเดียวกันและทำงานออกดังต่อไปนี้:

/**
 * 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);

ทิ้งมันไปเมื่อ Bootstrap มาพร้อมกับการแก้ไขปัญหานี้

ใน bootstrap 4 คุณสามารถใช้d-noneคลาสเพื่อซ่อนองค์ประกอบได้อย่างสมบูรณ์ https://getbootstrap.com/docs/4.0/utilities/display/

ปรับปรุง : จากนี้ไปฉันจะใช้และ.collapse$('.collapse').show()

สำหรับ Bootstrap 4 Alpha 6

สำหรับเงินทุน 4 .hidden-xs-upคุณต้องใช้

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

คลาส. .hidden - * - up จะซ่อนองค์ประกอบเมื่อวิวพอร์ตอยู่ที่เบรกพอยต์หรือกว้างกว่านั้น ตัวอย่างเช่น. hidden-md-up ซ่อนอิลิเมนต์บนวิวพอร์ตขนาดกลางขนาดใหญ่และขนาดใหญ่พิเศษ

นอกจากนี้ยังมีhiddenคุณลักษณะ HTML5

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

HTML5 เพิ่มแอททริบิวต์ใหม่ระดับโลกที่ชื่อว่า [ซ่อน] ซึ่งจัดรูปแบบเป็นจอแสดงผล: ไม่มีตามค่าเริ่มต้น การยืมความคิดจาก PureCSS เราปรับปรุงให้ดีขึ้นโดยเริ่มต้นด้วยการทำให้ [ซ่อน] {แสดง: ไม่มี! สำคัญ; } เพื่อช่วยป้องกันไม่ให้จอแสดงผลถูกแทนที่โดยไม่ตั้งใจ แม้ว่า IE10 จะไม่รองรับ [ซ่อน] แต่การประกาศอย่างชัดเจนใน CSS ของเราจะช่วยแก้ปัญหานั้นได้

<input type="text" hidden>

นอกจากนี้ยังมี.invisibleซึ่งจะมีผลต่อเค้าโครง

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

คลาส. invisible สามารถใช้เพื่อสลับเฉพาะการมองเห็นขององค์ประกอบซึ่งหมายความว่าการแสดงผลจะไม่ถูกแก้ไขและองค์ประกอบยังคงสามารถส่งผลกระทบต่อการไหลของเอกสาร

ซ่อนและซ่อนจะเลิกใช้แล้วและนำออกในภายหลังไม่มีอยู่ในเวอร์ชันใหม่ คุณสามารถใช้คลาสอื่น ๆ d-none / d-sm-none / ล่องหนขึ้นอยู่กับความต้องการของคุณ เหตุผลที่เป็นไปได้ที่ถูกลบออกเนื่องจากซ่อน / ซ่อนอยู่ค่อนข้างสับสนในบริบท CSS ใน CSS เพื่อซ่อน (ซ่อน) ใช้สำหรับการมองเห็นไม่ใช่สำหรับแสดง ทัศนวิสัยและการแสดงผลเป็นสิ่งที่แตกต่าง

ถ้าคุณต้องการคลาสสำหรับการมองเห็น: ซ่อนไว้คุณต้องมีคลาสล่องหนจากยูทิลิตี้การมองเห็น

ตรวจสอบด้านล่างทั้งการแสดงผลและยูทิลิตีการแสดงผล:

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

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

ใช้ตัวอย่างต่อไปนี้สำหรับ Bootstrap 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 ( 'แสดง').

หวังว่าพวกคุณจะพบว่ามีประโยชน์ :-)

Bootstrap, 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

คุณสามารถสร้างฟังก์ชั่นตัวช่วยเล็กน้อยตามมาตรฐาน KISS:

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

จากคำตอบข้างต้นฉันเพิ่งเพิ่มฟังก์ชั่นของตัวเองและสิ่งนี้จะไม่ขัดแย้งกับฟังก์ชั่น jquery ที่มีอยู่เช่น. leather (), .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;
    };

ฉันแก้ไขปัญหาของฉันโดยแก้ไขไฟล์ Bootstrap CSS โปรดดูเอกสารของพวกเขา:

.hide:

.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" จะไม่ทำงานเพราะ "การมองเห็น"

ดังนั้นสำหรับ Bootstrap ล่าสุด. leather ไม่ได้ใช้งานอีกต่อไป แต่ยังอยู่ในไฟล์ min.css ดังนั้นฉันออกจาก. hidden is is และเพิ่งลบ "! important" ออกจากคลาส ". ซ่อน" (ซึ่งควรจะเลิกใช้แล้ว) แต่คุณยังสามารถแทนที่มันใน CSS ของคุณเองฉันต้องการให้แอปพลิเคชันของฉันทำงานเหมือนเดิมดังนั้นฉันจึงเปลี่ยนไฟล์ Bootstrap CSS

และตอนนี้ jQuery "fadeIn ()" ใช้งานได้

เหตุผลที่ฉันทำสิ่งนี้กับคำแนะนำข้างต้นนั้นเป็นเพราะเมื่อคุณ "removeClass ('. hide')" วัตถุจะปรากฏขึ้นทันทีและคุณข้ามภาพเคลื่อนไหว :)

ฉันหวังว่ามันจะช่วยผู้อื่น

answer คำตอบที่ดีกว่า

ใน Bootstrap 4 คุณซ่อนองค์ประกอบ:

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

🛑แน่นอนคุณสามารถแสดงด้วย:

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

💓 แต่ถ้าคุณทำแบบ semantic ด้วยการถ่ายโอนความรับผิดชอบจาก Bootstrap ไปยัง jQuery คุณสามารถใช้ jQuery nicities อื่น ๆ เช่น fading:

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

เงินทุน Twitter ให้ชั้นเรียนสำหรับการสลับเนื้อหาดูhttps://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less

ฉันใหม่กับ jQuery อย่างสมบูรณ์และหลังจากอ่านเอกสารของพวกเขาแล้วฉันก็มาที่โซลูชันอื่นเพื่อรวม Twitter Bootstrap + jQuery

ก่อนอื่นวิธีการแก้ 'ซ่อน' และ 'แสดง' องค์ประกอบ (คลาส wsis-ยุบ) เมื่อคลิกที่องค์ประกอบอื่น (คลาส wsis-toggle) คือการใช้. สลับ

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

คุณได้ซ่อนองค์ประกอบ.wsis-collapseโดยใช้ Twitter Bootstrap (V3) class .hiddenเช่นกัน:

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

เมื่อคุณคลิก.wsis-toggleที่ jQuery กำลังเพิ่มสไตล์อินไลน์:

display: block

เนื่องจาก!importantใน Bootstrap ของ Twitter สไตล์อินไลน์นี้จึงไม่มีผลดังนั้นเราต้องลบ.hiddenคลาสออก แต่ฉันจะไม่แนะนำให้.removeClassทำเช่นนี้! เพราะเมื่อ jQuery กำลังจะซ่อนบางสิ่งบางอย่างอีกครั้งก็เพิ่มรูปแบบอินไลน์:

display: none

สิ่งนี้ไม่เหมือนกับคลาส. hidden ของ Twitter Bootstrap ซึ่งปรับให้เหมาะกับ AT เช่นกัน (โปรแกรมอ่านหน้าจอ) ดังนั้นหากเราต้องการแสดง div ที่ซ่อนอยู่เราจำเป็นต้องกำจัด.hiddenคลาส Bootstrap ของ Twitter ดังนั้นเราจึงกำจัดข้อความสำคัญ แต่ถ้าเราซ่อนอีกครั้งเราต้องการให้.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" );
    });
});