Question

我正在尝试使用show字段向下滑动多个内容。这很好用。该课程也很好地改为“up”。然而，当我再次点击文本时，没有任何反应。为什么这不起作用？有没有人有更好的解决方案？

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');
});

Answer 1

代码如：

jQuery('some selector')

现在要查找与'some selector' 匹配的元素，请注意以后可能与选择器匹配的元素。

大概你的元素最初只有一个'up'和'down'类，所以只有一个点击处理程序被绑定。

你可以这样做：

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/

Answer 2

如果我正确地为您辩护，那么您还需要更改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');
});

Answer 3

因为页面加载时不存在.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/

Answer 4

您需要做的就是切换 -

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

}）;

DEMO

Answer 5

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

最初使用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();
});

slideDown和slide使用jQuery打开多个字段

5 个答案: