0

我正在尝试使用显示字段向下滑动多个内容。这工作正常。班级也很好地变成了“向上”。然而，当我再次单击文本时，什么也没有发生。为什么这不起作用？有没有人有更好的解决方案？

jQuery('#slidetoggle.down').click(function(e){
    jQuery('.slider').slideUp();
    jQuery(this).text('show fields');
    jQuery(this).toggleClass('down');
    jQuery(this).toggleClass('up');
});
jQuery('#slidetoggle.up').click(function(e){
    jQuery('.slider').slideDown();
    jQuery(this).text('hide fields');
    jQuery(this).toggleClass('up');
    jQuery(this).toggleClass('down');
});
4

5 回答 5

3

代码如：

jQuery('some selector')

说要立即找到匹配的元素'some selector' ，而不是留意以后可能与选择器匹配的元素。

大概您的元素最初只有“向上”和“向下”类之一，因此只有一个单击处理程序被绑定。

你可以这样做：

jQuery('#slidetoggle').click(function(e){
    if ($(this).hasClass('down')) {
       jQuery('.slider').slideUp();
       jQuery(this).text('show fields').toggleClass('down up');
    } else {
       jQuery('.slider').slideDown();
       jQuery(this).text('hide fields').toggleClass('up down');
    }
});

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

于 2013-03-22T10:57:21.490 回答
0

我设法用不同的策略得到了相同的结果。

最初用 display:none; 隐藏其中一个按钮。然后：

jQuery('#slidetoggle.down').click(function(e){
    jQuery('.slider').slideUp();
    jQuery(this).hide();
    jQuery('#slidetoggle.up').show();
});
jQuery('#slidetoggle.up').click(function(e){
    jQuery('.slider').slideDown();
    jQuery(this).hide();
    jQuery('#slidetoggle.down').show();
});
于 2013-03-22T12:48:38.700 回答
0

如果我正确地告诉你，那么你还需要更改 ID，因为我想你正在使用相同的按钮..你正在更改文本而不是输入的 id ...所以其他 ID 的代码不会工作

尽管如此，您需要为一个选择器编写此代码，如下所示

jQuery('#slidetoggle').click(function(e)
{
  var text   = (jQuery(this).text() == 'show fields')?'hide field':'show fields';
  jQuery('.slider').slideToggle();
  jQuery(this).text(text);
  jQuery(this).toggleClass('down');
  jQuery(this).toggleClass('up');
});
于 2013-03-22T11:03:27.790 回答
0

您需要做的就是切换-

jQuery('#slidetoggle').click(function(e){
   jQuery('.slider').toggle('slideUp');

});

演示

于 2013-03-22T11:22:27.107 回答
0

因为.up页面加载时元素不存在。

你应该做的“稍微”不同:)

$('#slidetoggle')
.on('click', function(e){
    var $this = $(this),
        $slider = $('.slider'),
        isOpened = $slider.is(':visible');

    if (isOpened)
    {
        $slider.slideUp();
        $this.text('show fields');
    }
    else
    {
        $slider.slideDown();
        $this.text('hide fields');
    }
});

http://jsfiddle.net/qwL33/

于 2013-03-22T11:13:43.380 回答