Question

所以我对bootstrap v3.3.4并不熟悉，而且在javascript / jquery上很糟糕。

点击bootstrap导航栏中的下拉菜单时，我试图在加号和减号之间切换（在移动视图中，因此在移动下拉列表中）。我在导航中有下拉菜单，我想在每个菜单的右边加一个加号，一旦你点击它，加号就会消失，我想要一个减号来显示，这很简单吗？我也不想使用手风琴。我已经看了很多，看过几个例子，但没有一个与我的情况完全相同，我觉得这应该是超级简单的并且内置到bootstrap但是我没有看到它。

这是我的导航栏大部分，我拿出了所有其他不影响下拉的部分。

HTML：

<!--Nav Bar-->
<nav class="navbar navbar-default hidden-md hidden-lg hidden-md hidden-lg" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown hamburgerListLine">
                <i class="glyphicon glyphicon-plus pull-right"></i>
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Glass Containers</a>
                <ul class="dropdown-menu">
                    <li class="dropDownList"><a href="#">Glass Bottles</a></li>
                    <li class="dropDownList"><a href="#">Glass Jars</a></li>
                    <li class="dropDownList"><a href="#">Glass Jugs</a></li>
                    <li class="dropDownList"><a href="#">Glass Vials</a></li>
                </ul>
            </li>
            <li class="dropdown hamburgerListLine">
                <span class="glyphicon glyphicon-plus pull-right "></span>
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Plastic Containers</a>
                <ul class="dropdown-menu">
                    <li class="dropDownList"><a href="#">Plastic Bottles</a></li>
                    <li class="dropDownList"><a href="#">Plastic Jars</a></li>
                    <li class="dropDownList"><a href="#">Plastic Jugs</a></li>
                    <li class="dropDownList"><a href="#">Plastic Vials</a></li>
                    <li class="dropDownList"><a href="#">Plastic Tubes</a></li>
                </ul>
            </li>
            <li class="hamburgerList hamburgerListFlat"><a href="#">Sign In</a></li>
            <li class="hamburgerList hamburgerListFlat"><a href="#">My Account</a></li>
        </ul>
    </div>
</nav><!--Nav Bar-->

jQuery的：

$('.collapse')
        .on('shown.bs.collapse', function () {
            $(this).parent().find(".glyphicon-plus")
                    .removeClass("glyphicon-plus")
                    .addClass("glyphicon-minus");
        })
        .on('hidden.bs.collapse', function () {
            $(this).parent().find(".glyphicon-minus")
                    .removeClass("glyphicon-minus")
                    .addClass("glyphicon-plus");
        });

如果可能的话，我宁愿不使用jquery，我真的希望这是内置的bootstrap。这个jquery的问题是，当我点击初始下拉菜单时，它会激活，当我点击下拉列表中的下拉列表时，我希望它激活。

是否可以在没有jquery / javascript且在bootstrap v3.3.4中没有手风琴的情况下执行此操作？

小提琴：https://jsfiddle.net/4zs9r0vz/

切换BootStrap下拉图标

0 个答案: