悬停在切换两个类后点击事件的问题

Question

为什么悬停在.dropdown-menu 之外后第一次点击.dropper 不起作用？

产生问题的步骤：

1- 单击操作 A 按钮（下拉菜单应向下滑动，箭头转向向下角度）
2- 将鼠标悬停在下拉菜单上（下拉菜单应该向上滑动，箭头回到直角）
3- 再次点击Action A按钮（下拉菜单向下滑动但箭头保持直角）

我正在尝试处理 3 个级别的动画

1- 直接点击 .dropper
2- Out 点击正文
3-悬停在.dropdown-menu

看来我遇到了问题

$("body").on("hide.bs.dropdown", function (e) {
  var i = $(e.relatedTarget).find(".fa");
  i.removeClass("css-chevron-down").addClass("css-chevron-right");
});

当用户单击其他地方时，我试图切换下拉列表和动画。

$(".dropper").on('click', function () {
  $(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
  let $this = $(this).next(".dropdown-menu");
  $(".dropdown-menu").not($this).slideUp(300);
  $this.slideToggle(300);
});

$(".dropdown-menu").hover(function (e) {}, function (e) {
  $('.dropdown-menu').slideUp(500);
  $(".fa").removeClass("css-chevron-down").addClass("css-chevron-right");
});
$("body").on("hide.bs.dropdown", function (e) {
  var i = $(e.relatedTarget).find(".fa");
  i.removeClass("css-chevron-down").addClass("css-chevron-right");
});

.css-chevron-down {
  transform: rotate(0.25turn);
  transition: all 0.5s ease;
}

.css-chevron-right {
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></div>
</div>

Answer 1

我已经修复了你的代码：

1) 首先我删除事件hide.bs.dropdown 上的侦听器，因为可以在dropper 的点击事件上处理此侦听器内部的逻辑。

2) 我已经正确定位了相关元素，因为大多数时候，您定位的是具有某个类的所有元素，例如悬停侦听器上的 dropdown-menu 和 fa dropdown-menu.

查看下一个示例：

$(".dropper").on('click', function()
{
    $(this).find('.fa').toggleClass('css-chevron-down');
    let $this = $(this).next(".dropdown-menu");

    $(".dropdown-menu").not($this).slideUp(300)
        .prev(".dropper").find(".fa").removeClass("css-chevron-down");

    $this.slideToggle(300);
});

$(".dropdown-menu").hover(function (e) {}, function (e)
{
    $(this).slideUp(500);
    $(this).prev(".dropper").find(".fa").removeClass("css-chevron-down");
});

/*
$("body").on("hide.bs.dropdown", function (e)
{
    var i = $(e.relatedTarget).find(".fa");
    i.removeClass("css-chevron-down");
});
*/

.css-chevron-down {
    transform: rotate(0.25turn);
    transition: all 0.5s ease;
}

.css-chevron-right {
    transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></div>
</div>