Question

我想在用户做出选择后隐藏我的下拉子菜单。我希望它最终看起来像<span class="glyphicon glyphicon-menu-hamburger"></span>

下面是我已经开始的一些代码，但无法弄清楚如何隐藏菜单。谢谢。

<ul class="dropdown-menu">
    <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">2014<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="">Q1</a></li>
            <li><a tabindex="-1" href="">Q2</a></li>
            <li><a tabindex="-1" href="">Q3</a></li>
            <li><a tabindex="-1" href="">Q4</a></li>
        </ul>
        <div class="btn-group bt-toggle">
            <button type="button" class="btn btn-default" ng-click="toggleFilters();">Select Year</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
       </div>
    </li>
</ul>

Answer 1

我将div中的“.dropdown-submenu”中包含的内容包装起来，并执行以下操作：

$("#newdiv").hide()
$("#newdiv").animate({height: '0px'}, "slow");
$(".dropdown-submenu").append("<span class=\"glyphicon glyphicon-menu-hamburger\"></span>");

或者，有跨度，隐藏，并显示它......所以相反，你有

<ul class="dropdown-menu">
    <li class="dropdown-submenu">
       <span class="glyphicon glyphicon-menu-hamburger aspan" style="display:none;"></span>
      <div id="newdiv">

        <a class="test" tabindex="-1" href="#">2014<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="">Q1</a></li>
            <li><a tabindex="-1" href="">Q2</a></li>
            <li><a tabindex="-1" href="">Q3</a></li>
            <li><a tabindex="-1" href="">Q4</a></li>
        </ul>
        <div class="btn-group bt-toggle">
            <button type="button" class="btn btn-default" ng-click="toggleFilters();">Select Year</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
       </div>
     </div>
    </li>
</ul>

AND JS：

$("#newdiv").hide();
$("#newdiv").animate({height: '0px'}, "slow");
$(".aspan").show();

编辑：animate应该为0，span应该在#newdiv

之前

如何折叠/隐藏下拉菜单

1 个答案: