如何使用Twitter Bootstrap隐藏元素并使用jQuery显示元素?

2020/10/12 06:01 · javascript ·  · 0评论

假设我创建了这样的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>

如何显示和隐藏jQuery / Javascript中的HTML元素。

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

(感谢方明的评论)

Bootstrap 3.x

首先,不要使用.hide使用.hidden正如其他人所说,.hide已弃用,

.hide是可用的,但并不总是会影响屏幕阅读器,并且从v3.0.1开始不推荐使用

其次,使用jQuery的.toggleClass() .addClass().removeClass()

<div id="myId" class="hidden">Foobar</div>
  • 要显示它: $("#myId").removeClass('hidden');
  • 隐藏它: $("#myId").addClass('hidden');
  • 要切换它: $("#myId").toggleClass('hidden');

不要使用css类.show,它具有非常小的用例。的定义showhiddeninvisible在该文档

// 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()或.hide()对其进行操作

不建议使用此解决方案。使用票数最高的解决方案。

hide班是有用的,以保持隐藏在页面加载内容。

我的解决方案是在初始化期间,切换到jquery的hide:

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

然后show()hide()应正常运行。

解决这种烦恼的另一种方法是创建自己的CSS类,该类不会在规则末尾设置!important,如下所示:

.hideMe {
    display: none;
}

并像这样使用:

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

现在jQuery隐藏工程

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

@ dustin-graham概述的方法也是我的方法。还要记住,引导程序3现在按照getbootstrap中的文档使用“ hidden”而不是“ hide” 所以我会做这样的事情:

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

然后,无论何时使用jQueryshow()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 .hidenor !important,只需在事件函数中粘贴/重复该切换即可。

从2.3升级到3.1时最近遇到了这种情况;我们的jQuery动画(slideDown了,因为我们在页面模板中的元素上隐藏了。我们采用了创建带有Bootstrap类名称间隔的版本的方法,该类现在带有丑陋的!important规则。

.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-noneclass完全隐藏元素。
https://getbootstrap.com/docs/4.0/utilities/display/

更新:从现在开始,我使用.collapse$('.collapse').show()


对于Bootstrap 4 Alpha 6

对于Bootstrap 4,您必须使用.hidden-xs-up

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

当视口在给定的断点或更宽时,.hidden-*-up类隐藏元素。例如,.hidden-md-up在中,大和超大视口上隐藏元素。

还有hiddenHTML5属性。

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

HTML5添加了一个名为[hidden]的新全局属性,其样式设置为显示:默认情况下为无。借鉴PureCSS的想法,我们通过使[hidden] {display:none!important; },以防止其显示意外被覆盖。尽管IE10本身不支持[hidden],但CSS中的显式声明可以解决该问题。

<input type="text" hidden>

还有.invisible一些确实会影响布局。

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

.invisible类可用于仅切换元素的可见性,这意味着它的显示不会被修改,并且元素仍然可以影响文档的流程。

hide和hidden均已弃用,以后又被删除,新版本中不再存在。您可以根据需要使用d-none / d-sm-none / invisible等类。删除它们的可能原因是因为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('hide');

    $()。hideShow('show');

希望对您有所帮助。:-)

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函数(如.hide()、. 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 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,.hide不再使用,但仍在min.css文件中。所以我按原样离开了.hidden,只是从“ .hide”类(无论如何应该不推荐使用)中删除了“!important”。但是您也可以在自己的CSS中覆盖它,我只希望所有应用程序都具有相同的作用,所以我更改了Bootstrap CSS文件。

现在,jQuery“ fadeIn()”可以使用了。

与上面的建议相比,我这样做的原因是因为当您“ removeClass('。hide')”时会立即显示该对象,而您跳过了动画:)

我希望它可以帮助其他人。

The️正确的答案

在Bootstrap 4中隐藏元素:

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

🛑然后,可以肯定地用以下命令显示它:

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

💓但是,如果您以语义方式执行此操作,则可以将责任从Bootstrap转移到jQuery,然后可以使用其他jQuery优点,例如褪色:

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

Twitter Bootstrap提供了用于切换内容的类,请参阅https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less

我是jQuery的新手,在阅读了他们的文档之后,我来到了另一个结合Twitter Bootstrap + jQuery的解决方案。

首先,单击另一个元素(wsis-toggle类)时“隐藏”和“显示”一个元素(wsis-collapse类)的解决方案是使用.toggle

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

您还已经.wsis-collapse通过使用Twitter Bootstrap(V3)类隐藏了该元素.hidden

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

当您单击时.wsis-toggle,jQuery将添加一个内联样式:

display: block

由于!important在Twitter Bootstrap中,此内联样式无效,因此我们需要删除.hidden该类,但我不建议.removeClass这样做!因为当jQuery要再次隐藏某些东西时,它还会添加一个内联样式:

display: none

这与Twitter Bootstrap的.hidden类不同,后者也针对AT进行了优化(屏幕阅读器)。因此,如果我们想显示隐藏的div,则需要摆脱.hiddenTwitter Bootstrap类,从而摆脱重要的声明,但是如果再次隐藏它,我们希望再次拥有.hidden该类!我们可以使用[.toggleClass] [3]。

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

这样,您每次隐藏内容时都继续使用隐藏的类。

.showTB中类实际上与jQuery的内联样式相同,都为'display: block'但是,如果.show某个时候类有所不同,那么您也只需添加该类:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});
本文地址:http://javascript.askforanswer.com/ruheshiyongtwitter-bootstrapyincangyuansubingshiyongjqueryxianshiyuansu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!