使用jQuery將內容隱藏在div中

Question

加載文檔時，我需要在div中隱藏input和button元素。 僅在單擊按鈕后才顯示div。 我的html代碼是：

 $("#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代碼似乎都不起作用。 我在這里做錯什么嗎？ 請幫忙。

Answer 1

您的代碼有效，但是有一些錯誤：

• 您需要在jquery函數的末尾刪除'，'
• 您只需要隱藏＃bs-navbar-search div。 它將隱藏所有包含的內容（您的輸入和提交將被隱藏）。
• 我沒有看到包括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 2

隱藏div的孩子對我來說很好用...只需使用$("#bs-navbar-search").children().hide(); 隱藏div中的元素。 運行代碼片段並親自查看（由於隱藏了元素，因此未顯示任何內容）。 您確定使用的是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 3

您忘記了包含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 4

您可以通過多種方式進行操作。 您可以使用我的代碼，它應該可以工作。 您應該先加載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>

$（document）.ready（function（）{$（“＃bs-navbar-search”）。hide（）;

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

}）;

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>