在 Bootstrap 3 SlideDown() 隐藏元素上出现问题答案

【问题标题】：Having Issue On Bootstrap 3 SlideDown() hidden Element在 Bootstrap 3 SlideDown() 隐藏元素上出现问题
【发布时间】：2015-07-05 18:31:13
【问题描述】：

您能否看看this demo 并告诉我为什么change() 函数无法slideDown() hidden Bootstrap 3 中的元素？

这是我的代码

$(function() {
    $('input:radio').change(function() {
        if($(this).val()== 'Dog') {
            $('#hidden-list-1').slideDown();
        }
        if($(this).val()== 'Bird'){
            $('#hidden-list-2').slideDown();  
        }
    });
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

正如其他答案已经提到的那样，问题是 boostrap 有这样的风格

.hidden{
  display: none !important;
}

解决这个问题的一种方法是删除隐藏类。

$('#hidden-list-1').hide().removeClass('hidden').slideDown();

这是一个演示https://jsfiddle.net/dhirajbodicherla/zzdL5jp7/3/

【讨论】：

【解决方案2】：

这似乎是CSS中重要标签的问题。在 Bootstrap 文档 (http://getbootstrap.com/css/) 中，显示和隐藏类都标有重要：

   .show {
      display: block !important;
    }
    .hidden {
      display: none !important;
    }

jQuery slideDown() 应用的 css 更改很可能会被忽略。如果您将其取出并替换为 style="display:none;" 而没有重要，则 slideDown() 将起作用。我将其添加到小提琴中：https://jsfiddle.net/zzdL5jp7/1/

【讨论】：

【解决方案3】：

这是因为隐藏类强制元素始终隐藏。我很确定它会做类似的事情：

display: none !important;

因此，您必须在向下滑动元素后修改代码以删除该类。或者使用你自己的 CSS 来隐藏元素（这样你就没有 !important 了。

如果您将 JSFiddle 修改为具有 CSS：

#hidden-list-1 {
    display: none;
}

并删除hidden 类，您会看到它按预期工作。

【讨论】：

【解决方案4】：

您添加到#hidden-list-1 和#hidden-list-2 的hidden 类将覆盖您的JS 所做的显示属性更改。删除 hidden 类并声明隐藏在 CSS 中的两个元素将解决您的问题。

【讨论】：

【解决方案5】：

更新你的css代码

.show {
  display: block !important;
}
.hidden {
  display: none !important;
}

【讨论】：