Question

当我点击按钮，然后菜单显示旋转动画并再次关闭，当我再次单击按钮但我需要单击按钮三次再次显示菜单。你知道如何解决这个问题吗？

var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
               .css({ transform: 'rotate('+now+'deg)' })
               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
        }, duration: 0
    });
}

// show / hide the options
function toggleOptions(s) {
    $( 'button' ).click(function() {
        $(s).toggleClass('open');
        var li = $(s).find('li');
        var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
        for(var i=0; i<li.length; i++) {
            var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
            $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
        }
    });
}

$( 'button' ).click(function() {
    $('.selector button').click(function(e) {
        toggleOptions($(this).parent());
    });
});

setTimeout(function() { toggleOptions('.selector'); }, 100);

Answer 1

按下显示.selector容器内容的按钮，否则嵌套点击会发生冲突，因为它会影响.selector（$('.selector button').click()）
这应该有效，但我也会清理/评论那些嵌套点击，因为它们是不必要的。

示例：

/*$('.selector button').click(function(e) {
    toggleOptions($(this).parent());
});*/

工作代码段

＆＃13;

var angleStart = -360;

// jquery rotate animation
function rotate(li, d) {
  $({
    d: angleStart
  }).animate({
    d: d
  }, {
    step: function(now) {
      $(li)
        .css({
          transform: 'rotate(' + now + 'deg)'
        })
        .find('label')
        .css({
          transform: 'rotate(' + (-now) + 'deg)'
        });
    },
    duration: 0
  });
}

// show / hide the options
function toggleOptions(s) {
  $('button').click(function() {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    var deg = $(s).hasClass('half') ? 180 / (li.length - 1) : 360 / li.length;
    for (var i = 0; i < li.length; i++) {
      var d = $(s).hasClass('half') ? (i * deg) - 90 : i * deg;
      $(s).hasClass('open') ? rotate(li[i], d) : rotate(li[i], angleStart);
    }
  });
}

//This is unnecessary, at least for the code you've shared.
/*$('.selector button').click(function(e) {
  toggleOptions($(this).parent());
});*/


setTimeout(function() {
  toggleOptions('.selector');
}, 100);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selector'>
  <ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'>Option 1</label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'>Option 2</label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'>Option 3</label>
    </li>
    <li>
      <input id='4' type='checkbox'>
      <label for='4'>Option 4</label>
    </li>
  </ul>
</div>
<!-- Move this button out of .selector or impact the nested displayed stuff with a class instead of .selector button -->
<button>show stuff</button>

＆＃13;

如何实现这个正常工作的jQuery click事件？

1 个答案: