切换引导雪佛龙答案

【问题标题】：Toggle Bootstrap Chevron切换引导雪佛龙
【发布时间】：2015-05-07 17:50:48
【问题描述】：

当下拉菜单被切换时，我想在引导下拉菜单中切换 V 形。我可以让它在点击时切换，但如果你点击菜单的另一部分，V 形变回，我宁愿它在下拉菜单中切换。除非您单击 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/

【问题讨论】：

查看我修改后的答案。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

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

小提琴：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（在隐藏下拉菜单后触发）。

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

【讨论】：

我正在努力解决的问题是我在“#myDropdown”中使用什么 id，我试图在单击锚点时让它保持警觉，它只是作为测试而下降并且不能甚至让它这样做。
感谢分享，我觉得我快到了我做了一个小提琴也许你可以帮忙，我只想切换正在打开的那个。 jsfiddle.net/nu8wmjq5
最后一次修改。
你是圣人先生+1。
没问题。请将其标记为答案。我附上了我修改过的小提琴:)

【解决方案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>

【讨论】：

感谢您的回复我认为您的代码是我正在寻找的解决方案，但我不知道如何实现它，请查看我的小提琴，看看您的想法。谢谢。
看到你的小提琴了。那么你的问题是所有菜单上的加号都在改变，而不仅仅是你点击的那个吗？

【解决方案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/

【讨论】：