Question

在下面的脚本中，首次点击“toggleExtras”范围即可。但随后的点击什么都不做。我正在尝试使用on（'click'）方法和toggleClass来定义切换状态和未切换状态的事件。

    jQuery(document).ready(function()
    {
        jQuery('.toggleExtras').on('click', function(e)
        {
            //jQuery('.extras').slideToggle(); //This works but bounces twice.
            jQuery('.extras').show();
            jQuery('.toggleExtras').text('Hide Advanced Options');
            jQuery('.toggleExtras').toggleClass('toggleExtras toggleExtrasHide');
        });

        jQuery('.toggleExtrasHide').on('click', function(e)
        {
            jQuery('.extras').hide();
            jQuery('.toggleExtrasHide').text('Show Advanced Options');
            jQuery('.toggleExtrasHide').toggleClass('toggleExtrasHide toggleExtras');
        });
    });

HTML：

    <span class="toggleExtras">Show Advanced Options</span>

Answer 1

这是因为初始化时.toggleExtrasHide不存在...

我会像这样重写你的代码：

jQuery('.toggleExtras').on('click', function(e){
  jQuery('.extras').toggle();
  jQuery(this).text(function(el, currentValue){
    return currentValue == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options";
  });
});

演示：http://jsfiddle.net/xbLc2/

详细了解.toggle()：http://api.jquery.com/toggle/
详细了解.text()：http://api.jquery.com/text/

使用on（'click'）事件与jQuery和changeclass只触发一次

1 个答案: