首页 文章

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

提问于
浏览 次
0

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

<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>

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

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

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

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

当我双击h2时，我的切换盲动画只触发一次（我喜欢），但是toggleClass发生了两次（所以我很快切换到'活动'状态 - 让它与...不同步盲目动画的状态） .

Is there a way to ignore the second click of a double-click so this toggle only happens once per toggle animation?

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

javascript jquery animation css3

2 回答

  • 0

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

    $(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');
    });
  });
});
    回复于
  • 0

    也许..

    ....
$('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!! */
    }
  });
});
    回复于

相关问题