3

在下面的脚本中，第一次单击“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>
4

1 回答 1

3

这是因为.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/

于 2013-02-26T03:49:01.783 回答