引導javascript如何在模式窗口中隱藏div

Question

我有一個引導模態窗口，我想使用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

由於！important，此語法{“ display”：“ none！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>