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


当前回答

在引导4中,你可以使用d-none类来完全隐藏一个元素。 https://getbootstrap.com/docs/4.0/utilities/display/

其他回答

另一种解决这种烦恼的方法是创建自己的CSS类,在规则的末尾不设置!important,就像这样:

.hideMe {
    display: none;
}

并像这样使用:

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

现在jQuery隐藏工作

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

有一个没有JQuery的解决方案

您可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。

举个例子。

A:活动{显示:无;} /*活动链接*/ <a href="#">当它被点击时将会消失

带有按钮的示例

#btn-01:active ~ p { 显示:没有; } <button id="btn-01"> click me</button> <p id="text">

$(function(){

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

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

})

//你甚至不需要设置#my-div .hide或!重要的是,只需粘贴/重复事件函数中的切换。

基于上面的答案,我刚刚添加了我自己的函数,这进一步不与可用的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;
    };

在引导4中,你可以使用d-none类来完全隐藏一个元素。 https://getbootstrap.com/docs/4.0/utilities/display/