Twitter引导下拉菜单不能正常工作

Twitter bootstrap dropdown menu doesn't work properly

本文关键字：工作 常工作 下拉菜单 不能 Twitter      更新时间：2023-09-26

我试图使用这个菜单引导折叠侧菜单，但有些东西不能正常工作。有+符号和-符号表示开和关。当我打开第一个菜单时，+成为-，但当我点击第二个菜单时，首先必须关闭，-必须成为+。我希望你明白我的意思。这不能正常工作。同样，当我点击第二个菜单时，名称前面的图标也变成了-。

我试着在jsfiddle中重新创建这个菜单，但在那里不起作用。不打开菜单，但你可以看到+和-标志发生了什么。如果你点击了两个链接，它们都是-。

这是文件。我以前没有使用过jsfiddle

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

<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/

相关文章：