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