Question

请您查看this demo，让我知道为什么change()函数无法在{1}}中slideDown() hidden元素？

这是我的代码

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

Answer 1

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

.hidden{
  display: none !important;
}

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

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

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

Answer 2

这似乎是CSS中重要标签的问题。从Bootstrap文档（http://getbootstrap.com/css/）中，show和hidden类标记为重要：

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

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

Answer 3

这是因为隐藏类强制始终隐藏元素。我很确定它的确如下：

button {
  transform: translateY(5px);
}

因此，在向下滑动元素后，您必须修改代码以删除该类。或使用您自己的CSS来隐藏元素（因此您没有display: none !important;。

如果您修改JSFiddle以获得CSS：

!important

然后移除#hidden-list-1 { display: none; }类，您会看到它按预期工作。

Answer 4

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

Answer 5

更新您的css代码

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

在Bootstrap 3上有问题SlideDown（）隐藏元素

5 个答案: