Question

我有一个bootstrap模态窗口，我想使用javascript隐藏div元素。

引导程序窗口是

<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
    <div class="modal-header">
        <div style="float: right; margin-right: 2px">
            <a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
            <a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
        </div>
        <span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
      </div>
      <div class="modal-body" style="max-height: 610px; height: 610px;">    

        <ul class="nav nav-tabs" id="edit-dialog-tabs">
          <li><a href="#general" data-toggle="tab"><spring:message code="label.General" /></a></li>
          <li id="question-dialog-advanced-tab"><a href="#advanced" data-toggle="tab"><spring:message code="label.Advanced" /></a></li>
          <li><a href="#dependencies" data-toggle="tab"><spring:message code="label.Dependencies" /></a></li>
        </ul>               
        <div class="tab-content">
          <div class="tab-pane active" id="general" >

                <div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
                    <span class="overview-label"><spring:message code="label.RegEx" /></span><br />
                    <input id="question-dialog-regex" type="text" maxlength="255" />
                    <span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
                </div>              

          </div>
          <div class="tab-pane" id="advanced"> 

          </div>
          <div class="tab-pane" id="dependencies">      

          </div>        
        </div>              
        </div>
          <div class="modal-footer">
            <a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
            <a  id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
          </div>
</div>

我想要隐藏div general-regex-dialog-questions

我使用以下javascript代码

$("#general-regex-dialog-questions").css({"display": "none !important"});

div元素不被隐藏。

我不明白为什么。

Answer 1

也许是因为它在模态中。

你可以这样试试：

$(window).ready(function(){

     $("#edit-dialog").find("#general-regex-dialog-questions").hide();
     //or
     $("#edit-dialog").find("#general-regex-dialog-questions").css({"display": "none"});
});

希望它会有所帮助。

Answer 2

这种语法{“display”：“none！important”}因为！important而无效如果你遗漏了！important，它可以正常工作但是，如果您也想设置重要性，可以这样设置：

$( '.foo' ).each(function () {
   this.style.setProperty( 'display', 'none', 'important' );
});

Answer 3

要使用jquery隐藏元素，您应该使用.hide()方法。如果您想要显示它，请使用.show()。

如果你可以在两者之间切换，你也可以使用.toggle()来交替状态（隐藏/可见）。

如果它仍然不起作用，请尝试在调用事件函数时打印一些内容，以确保调用.hide（）或打印出选择结果$("#...")

$("#test").click( function(e){
  $("#test").hide();
} );

function show() {
  $("#test").show()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Title </h1>
<button onclick="show()">Show it back</button>
<div id="test" style="background-color: #CCC">
  <h2>Bunch of stuff</h2>
  <p>Blabla blabla blabla <br>
  Click on me to make me disappear </p>
  <span> I'm a span and I dissapear too </span>
</div>

<p> Bunch of stuff that will not disappear neither </p>

bootstrap javascript如何在模态窗口中隐藏div

3 个答案: