Question

我有两个按钮，一个用于编辑帖子，另一个用于取消编辑。根据编辑状态，应该隐藏一个。但是当页面加载时，默认情况下应该隐藏取消按钮。这非常有效，直到我将css类应用于按钮。

<input onclick="javascript: EditDay();" type="button" value="Edit Day" id="editDayButton" name="editDayButton" class="btn btn-primary" />
<input onclick="javascript: CancelEditDay();" type="button" value="Cancel" id="cancelEditDayButton" name="cancelEditDayButton" hidden="hidden" class="btn btn-primary"/>

我可能会在加载页面时使用javascript隐藏按钮。但我不知道该怎么做。

Answer 1

.hidden {
  display: none ;
 }

将此添加到您的CSS文件并将您的课程更改为

 class="btn btn-primary hidden"

并确保您的类在定义中不包含任何块注释

编辑：执行以下操作

<input onclick="javascript: CancelEditDay();" type="button" value="Cancel" id="cancelEditDayButton" name="cancelEditDayButton" class="btn btn-primary hello hidden"/>

并且jquery将是

$(document).ready(function(){
     $(document).on('click','.hello',function(e){
      $('.hello').removeClass('hidden');
   });
});

Answer 2

如果在添加类之前它正在工作，那么你添加的bootstrap类包含的内容类似于display：inline-block，它会覆盖你之前的行为。

Answer 3

作者CSS优先于浏览器CSS，它为hidden属性提供了display: none样式的元素。这就是为什么你的css中的任何显示声明（例如display: inline-block for Bootstrap按钮）都会覆盖它。您应该向CSS添加明确的[hidden] { display:none !important }规则。

顺便说一句，您的事件侦听器不需要javascript:前缀。它只需要javascript链接，例如小书签。

应用css类时，隐藏的输入不会保持隐藏状态

3 个答案: