在jQuery中单击时如何滑动div

Question

我在这里有以下简单演示： https : //tinker.io/8e585/1 。 我在下面附加了代码。

最初，“测试1”和“测试2”的内容均关闭。

但是，单击时它们将打开。 我想要它，如果当一个打开然后单击它关闭的时候。 因此， 如果打开并单击=关闭。 这可能吗？

非常感谢您的帮助：-)

..

的HTML

<div class="grid_4">    
    <h2 style="margin-bottom:4px"><a href="javascript:slideonlyone('newboxes6');" style="color:#455560!important;">Test 1</a></h2>
    <div class="newboxes2" id="newboxes6">
        <p>bla 1</p>
    </div>
</div>

<div class="grid_4">    
    <h2 style="margin-bottom:4px"><a href="javascript:slideonlyone('newboxes7');" style="color:#455560!important;">Test 2</a></h2>
    <div class="newboxes2" id="newboxes7">
        <p>bla 2</p>
    </div>
</div>

的CSS

.newboxes2 {display:none}

jQuery的

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
                jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               $(this).slideDown(200);
          }
          else {
                jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               $(this).slideUp(600);
          }
     });
}

Answer 1

您可以简单地使用一个类来做到这一点：

https://tinker.io/8e585/12

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if (this.id == thechosenone) {
                if($(this).is('.active') )
                   $(this).removeClass('active').slideUp(600);
              else 
              $(this).addClass('active').slideDown(200);
          }
          else              
               $(this).removeClass('active').slideUp(600);

         if($(this).is('.active') )
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
         else
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
     });
}

Answer 2

一切都应该比您想的容易得多。 您应该删除内联javascript事件处理程序。 并使用jquery-toggle-mechanism：

那么您的JavaScript代码可能会变得像这样简短：

$('.grid_4').bind('click', function () {
  $(this).find('.newboxes2').slideToggle(200);
});

参见更新后的修补匠示例： https : //tinker.io/8e585/4

如果您希望slideDown的速度（200）比slideUp（600）快，则可以查找当前的显示属性：

var duration, $newboxes2;
$('.grid_4').bind('click', function () {
  $newboxes2 = $(this).find('.newboxes2');
  duration = $newboxes2.css('display') === 'none' ? 200 : 600;
  $(this).find('.newboxes2').slideToggle(duration);
});

修补匠在这里工作： https ： //tinker.io/8e585/5

imageswap编码。 该代码甚至可以短1或2行（if-else），但我还是这样保留它，以使您更容易阅读：

var duration, $newboxes2, imgSrc, imgBase = '/wp-content/themes/boilerplate/images/';

$('.grid_4').bind('click', function () {
  $newboxes2 = $(this).find('.newboxes2');
  if ($newboxes2.css('display') === 'none') {
    duration = 200;
    imgSrc = imgBase + 'image_corner_btn_onstate.png';
  } else {
    duration = 600;
    imgSrc = imgBase + 'image_corner_btn_offstate.png';
  }
  $(this).find('img.small').attr('src', imgSrc);
  $(this).find('.newboxes2').slideToggle(duration);
});

参见修补匠： https : //tinker.io/8e585/13

Answer 3

听起来像是您想要手风琴： http : //jqueryui.com/accordion/或者，您可以使用下面的Javascript（删除HTML中包含的嵌入式Javascript，只需使用“＃”）：

(function($) {
$(function() {
  var links =  $('.grid_4 h2:first-child a');
  links.addClass('closed');
  links.click(function() {    
   var $this = $(this);

   links.each(function() {
     var curLink = $(this);
     if(curLink !== $this) {
       curLink.parents('.grid_4').find('.newboxes2').slideUp(600, function({curLink.addClass('closed');});
       curLink.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
        }
  });

    if($this.hasClass('closed')) {
        $this.parents('.grid_4').find('.newboxes2').slideDown(200, function() {$this.removeClass('closed');});
        $this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
    } else {
        $this.parents('.grid_4').find('.newboxes2').slideUp(600, function() {$this.addClass('closed');});
        $this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
    }

});
});
})(jQuery);