Question

当切换下拉菜单时，我想在引导程序下拉菜单中切换V形符号。我可以在点击时切换它，但是如果你点击雪佛龙改变回来的菜单的另一部分，我宁愿它以下拉式切换。除非你点击雪佛龙将其改回来，否则它目前将保留减号。

<li class="dropdown navbar-custom first-navbar-custom">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle shortNav hidden-md hidden-lg pull-left cheveron-dropdown">
    <span class="chevron_toggleable glyphicon glyphicon-plus glyphiconIcon hidden-md hidden-lg">
    </span>
  </a>
  <a href="/glass-containers/c/455/"><strong>Glass Containers</strong>
</a>
<ul class="dropdown-menu">
<script>
  $(document).ready(function() {
    $('dropdown-toggle').dropdown('toggle', function() {
      $('.chevron_toggleable').toggleClass('glyphicon-plus glyphicon-minus');
    });
  });
</script>

我觉得它非常接近，我只是没有jquery部分正确可以有人请帮助我并告诉我我做错了什么。

小提琴应该解释所有。 https://jsfiddle.net/nu8wmjq5/

Answer 1

基于作者的第二次编辑JSFIDDLE：

以下代码将对特定于类选择器的下拉列表中的所有事件做出反应。然后它会找到触发事件的特定下拉列表中的V形符号。

FIDDLE：https://jsfiddle.net/t79to9xu/

$(document).ready(function() {

    $('.myDropdown').on('show.bs.dropdown', function () {
        $(this).find('.chevron_toggleable')
        .removeClass("glyphicon-plus")
        .addClass("glyphicon-minus");
    })

    $('.myDropdown').on('hide.bs.dropdown', function () {
      $(this).find('.chevron_toggleable')
      .removeClass("glyphicon-minus")
      .addClass("glyphicon-plus");
    })

});

我确信有更好的方法可以做到这一点，但我会让你做你的研究。 .find（）搜索元素的后代。

https://api.jquery.com/find/

因此，值得注意的是，如果你的下拉列表中有两个带有.chevron-toggleable类的元素，那么它将修改它们。如果情况确实如此，你需要对选择器更加具体。

修改

我附上了一些示例代码。这是Skelly here提供给另一个问题的示例的分叉版本：

http://www.bootply.com/zjWn1QPfNU

JS：

$('#myDropdown').on('show.bs.dropdown', function () { $('#chevron').removeClass("glyphicon-plus").addClass("glyphicon-minus"); }) $('#myDropdown').on('hide.bs.dropdown', function () { $('#chevron').removeClass("glyphicon-minus").addClass("glyphicon-plus"); })

HTML：

<div class="btn-group" id="myDropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Menu <span id="chevron" class="glyphicon glyphicon-plus"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> <li class="divider"></li> <li><a href="#">Choice..</a></li> </ul> </div>

原始回答

Bootstrap有许多不同的事件，在与下拉列表交互时触发。他们在官方文档中here。

具体而言，您感兴趣的是 hide.bs.dropdown （事件在即将被隐藏时立即触发）和 hidden.bs.dropdown < / strong>（隐藏下拉列表后触发）。

$('#myDropdown').on('hide.bs.dropdown', function () { // DROPDOWN IS GOING TO CLOSE, CHANGE CHEVRON HERE. })

Answer 2

这有帮助吗？

<script>
  $(document).ready(function() {
    $('dropdown-toggle').dropdown('toggle', function() {
      if($('.chevron_toggleable').hasClass('glyphicon-plus')) {
          $(this).removeClass("glyphicon-plus").addClass("glyphicon-minus");
      } else {
            $(this).removeClass("glyphicon-minus").addClass("glyphicon-plus");
        }
    });
  });
</script>

Answer 3

对于未来的研究人员，这是针对导航栏下拉菜单，此代码可能对您有所帮助

$(function() {
    // THIS WILL FIRE WHENEVER DROPDOWN SHOW
    $('.nav > li.dropdown').on('show.bs.dropdown', function () {
        $(this).find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    });

    // THIS WILL FIRE WHENEVER DROPDOWN HIDE
    $('.nav > li.dropdown').on('hide.bs.dropdown', function () {
        $(this).find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    });
});

这是一个工作小提琴https://jsfiddle.net/qfe9e7tb/1/

切换Bootstrap雪佛龙

3 个答案: