javascript - 将鼠标悬停在切换两个类上后点击事件问题

Question

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

产生问题的步骤:

1-点击 Action A按钮(下拉菜单应该向下滑动，箭头变成向下的 Angular )
2- 将鼠标悬停在下拉菜单上(下拉菜单应向上滑动，箭头应返回直 Angular )
3- 再次点击 Action A 按钮(下拉列表向下滑动但箭头保持直 Angular )

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

1- 直接点击 .dropper
2-点击 body
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>