Question

我有一个下拉，我想最初隐藏。当我点击+按钮时，我希望显示下拉列表。我遇到的错误是对.show的调用只会闪烁下拉。它不会暴露在外：

小提琴：https://jsfiddle.net/marshall62/nj783tbr/
点击加号后会产生某种POST错误，但你知道我正在尝试做什么......

Javascript（w Jquery + bootstrap）

 $(document).ready(function() {
            $('.dropdown-toggle').hide();
            $('.dropdown-toggle').dropdown()
            $('#add-strategy').click(function ()  {
                $('.dropdown-toggle').show();
            });

        });

HTML

<a id="add-strategy" href=""><span class="glyphicon glyphicon-plus"></span></a> Click Plus to add a strategy

<div id="strategy-pulldown"  class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                ----
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                    <li><a href="#">strategy a</a></li>
                     <li><a href="#">strategy b</a></li>
                      <li><a href="#">strategy c</a></li>

            </ul>
        </div>

Answer 1

您需要添加preventDefault方法。您正在使用导致页面重新加载的锚点。您需要使用以下代码来防止这种情况。

 $(document).ready(function() {
            $('.dropdown-toggle').hide();
            $('.dropdown-toggle').dropdown()
            $('#add-strategy').click(function (e)  {
                e.preventDefault();
                $('.dropdown-toggle').show();
            });

        });

如何隐藏/显示自举下拉菜单

1 个答案: