Verstecken der Inhaltselemente in einem div mit jquery

Question

Ich muss die Eingabe und Schaltflächenelemente in einem Div ausblenden, wenn das Dokument geladen wird. Das div soll erst nach einem Klick auf eine Schaltfläche angezeigt werden. Mein HTML-Code ist:

$("#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>

Aber keiner der JQuery-Code oben scheinen zu funktionieren. Mache ich hier etwas falsch? Bitte helfen Sie.

Answer 1

Sie haben vergessen, jQuery aufzunehmen.(Im Editor auf der linken Seite können Sie sie auswählen)

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

Sie können es auf viele Arten tun. Sie können meinen Code verwenden, es sollte funktionieren. Sie sollten die jquery-Bibliothek vorher laden.

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

anzeigen Div

<script> 

$ (document) .ready (function() { $ ("# bs-navbar-Suche") ausblenden();.

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

});

Answer 3

Ihr Code funktioniert, aber es gibt ein paar Fehler:

• Sie müssen entfernen '' am Ende der Jquery Funktion
• Sie müssen nur # bs-navbar-Suche div verstecken . Es wird alles verstecken, was es umgibt (deine Eingabe und deine Eingabe werden versteckt).
• Ich habe nicht einschließlich jQuery gesehen, vielleicht haben Sie es in einem anderen Teil Ihres Codes getan.
• Wenn Sie das jQuery-Code am Anfang Ihrer Seite setzen, müssen Sie es in document.ready wickeln

$("#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

Ausblenden der Kinder des div funktioniert gut für mich ... Verwenden Sie einfach $("#bs-navbar-search").children().hide();, um die Elemente innerhalb des div auszublenden. Führen Sie das Code-Snippet aus und sehen Sie selbst (es zeigt nichts an, weil es die Elemente versteckt). Sind Sie sicher, dass Sie die jQuery-Bibliothek verwenden und Ihre Javascript-Quelle korrekt verknüpft haben? Auch Ihr javascript/jQuery-Code, den Sie verwendet haben, hat Kommas, die Sie nicht verwenden sollten, aber ich bin mir nicht sicher, ob Sie das getan haben, um uns zu zeigen, was Sie versucht haben oder ob das Ihr tatsächlicher Code ist.

Wie dem auch sei, sollte dies diesen Trick tun:

$("#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

ich Ihren Code wie pro Ihre Anforderung geändert haben. Bitte überprüfen Sie und lassen Sie mich wissen, wenn Sie Fragen haben.

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