jqueryを使用してdiv内のコンテンツ要素を非表示にする

Question

ドキュメントを読み込むときにdiv内のinput要素とbutton要素を非表示にする必要があります。 divは、ボタンをクリックした後にのみ表示されます。

$("#bs-navbar-search").hide();  
 
$("#bs-navbar-search").children().hide(); 
 
$("#bs-navbar-search form div input, #bs-navbar-search form button").hide();

<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
</div>

しかし、上記のjQueryコードのどれも働いているように見えません：私のhtmlコードです。私はここで間違っていますか？助けてください。

Answer 1

あなたはjQueryのを含めるのを忘れていました。私はあなたの要件ごとに、あなたのコードを変更した

$(document).ready(function(){ 
 
    
 
    $("#bs-navbar-search").hide(); 
 
    $('#show').click(function(){ 
 
    $("#bs-navbar-search").show(); 
 
    }); 
 
    $('#toggle').click(function(){ 
 
    $("#bs-navbar-search").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="show">Show</button> 
 
<button id="toggle">Toggle</button> //just for a test 
 

 
<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
</div>

Answer 2

さまざまなことができます。あなたは私のコードを使用することができます、それは動作するはずです。前にjqueryライブラリをロードする必要があります。

<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
        <form class="navbar-form navbar-left" role="search"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
         </div> 
         <button type="submit" class="btn btn-default">Submit</button> 
        </form> 

       </div> 

ショー本部

<script> 

$（ドキュメント）.ready（関数（）{ $（ "＃BS-ナビゲーションバー検索"）非表示（）;。

function myFunction() { 
    $("#bs-navbar-search").show(); 
} 

}）;

Answer 3

あなたのコードは動作しますが、いくつかのミスがあります：あなたはちょうど位にBS-ナビゲーションバー - 検索のdivを非表示にする必要があり

jqueryの関数の最後に「」あなたが削除する必要が

• 。それはあなたが入力したすべてのものを非表示にします（あなたの入力と送信は隠されます）。
• jQueryを含めて表示されませんでした。おそらく、あなたのコードの別の部分でそれをしました。
• あなたのページの冒頭で、このjQueryのコードを配置した場合、あなたはdocument.ready

$("#bs-navbar-search").hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
    <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
</div>

Answer 4

でそれをラップする必要がdiv要素の子を非表示にすることは私のために正常に動作します... div内の要素を非表示にするには、$("#bs-navbar-search").children().hide();を使用してください。コードスニペットを実行し、自分自身で見てください（要素を隠しているため何も表示されません）。 jQueryライブラリを使用していて、javascriptソースを正しくリンクしていますか？また、使用しているjavascript/jQueryコードには使用しないでくださいが、あなたが試したことを表示するか、それが実際のコードであるかを私たちに示したかどうかはわかりません。

とにかく、これはこのトリックを行う必要があります。

$("#bs-navbar-search").children().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
 
     <form class="navbar-form navbar-left" role="search"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
    </div>

Answer 5

`<script>` 
 
$(document).ready(function(){ 
 

 
     $("#bs-navbar-search").hide();, 
 
     
 
      $("#bs-navbar-search").children().hide();, 
 

 
     $("#bs-navbar-search form div input, #bs-navbar-search form button").hide(); 
 
});

<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
 
         <form class="navbar-form navbar-left" role="search"> 
 
          <div class="form-group"> 
 
           <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
 
          </div> 
 
          <button type="submit" class="btn btn-default">Submit</button> 
 
         </form> 
 

 
        </div>

Answer 6

（左側のエディタであなたはそれを選択することができます）。ご照会いただいているかどうかを確認してお知らせください。

$(document).ready(function(){ 
 
    $("#divSearch").hide(); 
 
    $("#showSearch").on("click",function(){ 
 
     $("#divSearch").show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search"> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
    <div class="form-group" id="divSearch"> 
 
     <input type="text" class="form-control" placeholder="Search" id="navbar-search-box"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </div> 
 
    <input type="submit" id="showSearch" value="Show Search Field"/> 
 
    </form> 
 

 
</div>