javascript - 切换 Bootstrap 雪佛龙

Question

我想在 Bootstrap 下拉菜单中切换一个人字形，当下拉菜单被切换时。我可以在单击时使其切换，但如果您单击菜单的另一部分 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 部分，有人可以帮助我并告诉我我做错了什么。

fiddle 应该解释一切。 https://jsfiddle.net/nu8wmjq5/

Answer 1

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

下面的代码将对特定于类选择器的下拉列表中的所有事件使用react。然后，它会找到触发事件的特定下拉列表中的 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 提供给另一个问题的示例的 fork 版本:

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.
})