bootstrap javascriptモーダルウィンドウのdivを非表示にするには

Question

私はブートストラップモーダルウィンドウを持っており、javascriptを使ってdiv要素を隠したいと思っています。

ブートストラップウィンドウが、私は、次のJavaScriptコード

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

div要素が隠されていないを使用してdivのgeneral-regex-dialog-questions

を非表示にする

<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> 

です。

私は理由を理解していません。

Answer 1

この重要な構文のため、この構文{"display"： "none！important"}は機能しません。
！importantを省略すると、正常に動作します。あなたが.hide()メソッドを使用する必要があり、jqueryのを使用して要素を非表示にするには

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

Answer 2

：あなたにも重要性を設定したい場合は
しかし、あなたはこのようにそれを設定することができます。それを表示したい場合は、.show()を使用してください。

2つの間で切り替える可能性がある場合は、.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>

Answer 3

の結果をプリントアウトされた）何かを印刷してみてください多分モーダルの内側にあるからでしょう。

あなたはこのようにそれを試すことができます。

$(window).ready(function(){ 

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

はそれに役立つことを願っています。