如何在if语句中指定一个事件作为条件(jQuery)

How to assign an event as a condition in if statement (jQuery)?

本文关键字：事件 一个 jQuery 条件 语句 if      更新时间：2023-09-26

我正在制作一个导航栏。我想用if语句检查slideUp()是否应用于ul，如果应用了，那么我想在父li中将classToggle()应用于<span>

Html: 

<li class="main"><span class="arrow-up"></span>
  <ul class="sub">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</li>
<li class="main"><span class="arrow-up"></span>
  <ul class="sub">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</li>

我使用下面的代码来关闭活动子菜单，一旦另一个被点击，并切换'arrow-up arrow-down'类，但我想切换这些类只有当子菜单被滑动，所以我想在if语句中插入.slideUp()事件，如何做到这一点?

$('.main').click(function(){
   $('ul',this).slideToggle('fast');
    // slide up the current active ul
    $('ul','.main').not($('ul',this)).slideUp('fast');
    $('span',this).toggleClass('arrow-up arrow-down');
    $('span','.main').not($('span',this)).toggleClass('arrow-up arrow-down');
    }

当你在元素上使用.slideToggle()时，你可以为它添加一个类，并使用这个类来检测元素是否被切换。

也可以使用if ( $('.element').is(':visible') ) { //Do something

如果正确理解问题?尝试使用.slideToggle(), .prev()的complete回调来选择最接近的span元素

$(".main").click(function() {
  var complete = function complete() {
    $(this).prev("span").toggleClass("arrow-up arrow-down");
  };
  $("ul", this).slideToggle("fast", complete)
  .promise()
  .then(function() {
    var elems = $("ul", ".main").not(this);
    if (elems.is(":visible") && $(this).is(":visible")) {
        elems.slideToggle("fast", complete);
    }
  });
});
.arrow-down {
  color: blue;
}
.arrow-up {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul>
  <li class="main"><span class="arrow-up">span</span>
    <ul class="sub">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li class="main"><span class="arrow-up">span</span>
    <ul class="sub">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
</ul>

相关文章：