javascript - Twitter Bootstrap 下拉菜单无法正常工作

Question

我正在尝试使用此菜单 Bootstrap Collapsible Side Menu但有些东西不能正常工作。有 + 符号和 - 用于打开和关闭。当我打开第一个菜单时 + 必须变成 - 但是当我点击第二个菜单时首先必须关闭并且 - 必须变成 + 。我希望你明白我的意思。这不能正常工作。此外，当我单击第二个菜单时，名称前面的图标也变为 - 。

我试图在 jsfiddle 中重新创建此菜单，但在那里不起作用。不打开菜单，但您可以看到 + 和 - 标志发生了什么。如果您同时单击这两个链接，它们将显示为 -。

Here is the jsfiddle .我之前没有使用过 jsfiddle。

Answer 1

看起来您只是忘记加载 jquery，或者您是在 Bootstrap 之后加载它。如果您正确加载它，它工作正常。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

http://jsfiddle.net/acidrat/BP6Wh/2/

检查浏览器控制台是否有错误消息。

编辑

好的，现在我明白了。您将不得不处理折叠后触发的 Bootstrap 折叠事件。

 $('#menu-bar').on('shown.bs.collapse', function () {
             var currentlySelectedElement = $(this).find('.collapse.in');
             var targetAnchor = $('[data-target="#' + currentlySelectedElement.attr('id') + '"]');
             $('[data-target="#' + currentlySelectedElement.attr('id') + '"]').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
         });

         $('#menu-bar').on('hidden.bs.collapse', function () {
             var currentlyCollapsedElements = $(this).find('.collapsed');
             currentlyCollapsedElements.each(function () {
                 $(this).find('i.fa-minus').removeClass('fa-minus').addClass('fa-plus');
             });

         });

这里是更新的 jsFiddle:http://jsfiddle.net/acidrat/BP6Wh/5/