下拉菜单在css中折叠

Posted 2023-05-07

【中文标题】下拉菜单在css中折叠

【英文标题】：Drop down menu collapsing in css

【发布时间】：2016-08-07 00:54:29

【问题描述】：

我使用的是来自

的代码 sn-p

http://bootsnipp.com/snippets/featured/advanced-dropdown-search

我对代码做了如下修改

 <div class="col-md-12">
            <form action="./" method="POST" autocomplete="on">
                <div class="input-group" id="adv-search">
                    <input type="text" class="form-control"
                        placeholder="Search for snippets" id="mainForm" name="searchBox" />
                    <div class="input-group-btn">
                        <div class="btn-group" role="group">
                            <div class="dropdown dropdown-lg">
                                <button type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                </button>
                                <span class="dropdown-menu dropdown-menu-right" role="menu">
                                    <div class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="filter">Filter by</label> <select
                                                class="form-control" name="docType">
                                                <option value="0" selected>All Sources</option>
                                                <option value="1">Option 1</option>
                                                <option value="2">Option 2</option>

                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Author / Modifier</label> <input
                                                class="form-control" type="text" name="authorName" />
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Contains the words</label> <input
                                                class="form-control" type="text" name="words" />
                                        </div>
                                        <!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> -->
                                    </div>
                                </span>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

移动上面的表单标签后，只需单击下拉菜单上的任意位置，下拉菜单就会折叠。

谁能解释一下原因？

我尝试进行了很多更改，但没有任何效果。

https://jsfiddle.net/tj2y5ptp/

【问题讨论】：

您能否提供更多信息，因为我没有得到它。

你看到 bootsnip 的例子了吗？如果您单击搜索栏旁边的下拉按钮，它会下拉，您可以在高级搜索中输入字段。在我的代码中，它会很好地下拉，但是如果您单击内部下拉菜单，即选择标签或该 div 中已下拉的任何位置，高级搜索就会关闭

请将 SPAN 元素（下拉菜单类）替换为 DIV，重试并告知我们。

这行不通。直到现在我才使用 Div。现在只有我改成了 span 来检查新的东西

您能否向我们提供您的自定义代码的小提琴？

【参考方案1】：

尝试删除data-toggle="dropdown" 并使用jquery .toggleClass('open'); 和.removeClass('open'); 到open/close 下拉菜单，（然后下拉菜单将关闭只需单击它外部（在正文上）：

打开下拉菜单：

$('.dropdown-lg .btn').on('click', function (event) 
    $(this).parent().toggleClass('open');
);

关闭下拉菜单（点击正文时）：

$('body').on('click', function (e) 
    if (!$('.dropdown-lg').is(e.target) 
        && $('.dropdown-lg').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) 
        $('.dropdown-lg').removeClass('open');
    
);

见Updated fiddle，希望对你有帮助，谢谢。

【讨论】：

像魅力一样工作。谢谢:)