html - 下拉菜单/搜索栏 Bootstrap

Question

只是两个小问题，在学校作业中使用 bootstrap 重新创建一个通用网站。

A) 当屏幕小于 820 像素时，我一直在水平导航栏中隐藏一个搜索输入字段/提交按钮，并将另一个名为“搜索”的下拉列表与下拉列表中的输入字段合并在一起，这很好。

但我试图隐藏此搜索下拉列表，直到屏幕小于 820 像素并使用类和 display: none 定位此列表，但它仍在显示。无论如何你可以做到这一点？

<li class="dropdown searchDropDown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Search<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
             <li>
                 <input type="text" class="form-control searchBox" placeholder="Search">
                 <button type="submit" class="btn btn-default">Submit</button>
            </li>
        </ul>
</li>

我的 .searchDropDown {display:none} 并且有一个最大宽度 820px 的媒体查询 display: block但问题是它没有以整页大小隐藏此列表类。

B) 当我单击搜索下拉菜单并尝试单击搜索输入字段时，它会失去焦点并回滚。

Answer 1

B) 您的点击传播到上面附加了点击事件的 li，您可以添加这样的函数 (jQuery)

$('.searchBox').click(function(e){
e.stopPropagation();
});

如果这不起作用，请确保您实际单击的是输入而不是其他元素。

我会在一分钟内回到A