将鼠标悬停在切换两个类上后，在单击事件上出现问题

Question

为什么在.dropper上悬停后第一次点击.dropdown-menu无效？

产生问题的步骤：

1-单击“动作A”按钮（下拉菜单应向下滑动，箭头变为向下角度）
2-将鼠标悬停在下拉菜单上（下拉菜单应向上滑动，箭头重新回到直角）
3-再次单击操作A按钮（下拉幻灯片但箭头保持直角）

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

1-直接单击.dropper
2-出点击身体
3-悬停.dropdown菜单

好像我遇到了

$("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的click事件来访问此侦听器内部的逻辑。

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>