Question

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

A）当屏幕显示时，我一直在水平导航栏中隐藏搜索输入字段/提交按钮。 820px并在下拉列表中包含另一个名为“search”的下拉列表和一个输入字段，这很好。

但是我试图隐藏此搜索下拉列表，直到屏幕显示为＆lt; 820px并使用类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}并针对max-width 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代码

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

2 个答案: