下拉菜单/搜索栏引导程序

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

Answer 2

问题A用

@media screen and (min-width: 820px) {
    .searchDropDown {
    display: none!important;
    }
}

另外，记得关闭你的 img 和 input 标签