Question

我写了一个简单的手风琴式导航边栏（几个导航选项列表）：

<nav>
  <ul>
    <li class="section">
      <h2>Section 1 Header</h2>
      <ul>
        <a href="#"><li>First Option</li></a>
        <a href="#"><li>Second Option</li></a>
        <a href="#"><li>Third Option</li></a>
      </ul>
    </li>
    <li class="section">
      <h2>Section 2 Header</h2>
      <ul>
        <a href="#"><li>First Option</li></a>
        <a href="#"><li>Second Option</li></a>
        <a href="#"><li>Third Option</li></a>
      </ul>
    </li>
  </ul>
  ...
</nav>

jQuery脚本，当点击给定部分的h2时隐藏/显示导航选项列表：

$(document).ready(function() {
    $('li.section ul').hide();
    $('li.section h2').click(function() {
        $(this).toggleClass('active');
        $(this).parent().children('ul').toggle('blind', { direction: 'vertical' });
    });
});

整个效果很好，但是双击时我遇到了麻烦。

手风琴效果的动画由上面的脚本处理 - 但激活的标题区域的“高亮”颜色是通过简单的CSS3过渡处理的，该过渡在脚本切换类时生效。

当我双击h2时，我的切换盲动画只发射一次（我喜欢），但是toggleClass发生了两次（所以我很快就进入和退出'活动'状态 - 将它排除在外与盲动画的状态同步。）

有没有办法忽略双击的第二次点击，这样每个切换动画只会发生一次此切换？

或者最好将它想象为忽略给定部分的h2点击事件，而切换盲动画正在该部分发生......？

Answer 1

切换完成后，尝试将标题区域设置为“活动”。我没有测试过，只是试一试。

$(document).ready(function() {
  $('li.section ul').hide();
  $('li.section h2').click(function() {
    var thiz = $(this);
    thiz.parent().children('ul').toggle('blind', { direction: 'vertical' }, function() {
      // make it active after toggle
      thiz.toggleClass('active');
    });
  });
});

Answer 2

也许..

....
$('li.section h2').bind('click dblclick',function() {
....

或

$(document).ready(function() {

  $('li.section ul').hide();

  $('li.section h2').click(function() {
    $t = $(this); /* Aliased for ease of use */
    if( !$t.hasClass('active') ){
      /* Not marked as Active yet */
      $('li.section h2.active')
        .not($t)
        .removeClass('active')
          .parent().children('ul')
            .toggle('blind', { direction: 'vertical' });;
      /* Above assumes you want only one h2 to be active at a time.
         If not, remove the above two lines... */
      $t
        .toggleClass('active')
        .parent().children('ul')
          .toggle('blind', { direction: 'vertical' });
    }else{
      /* Already Active! Do Nothing!! */
    }
  });
});

jQuery toggleClass＆amp;切换效果对双击事件的响应方式不同，使它们不同步

2 个答案: