Javascript 如何在jQuery中单击时滑动div

我这里有以下简单的演示：。我在下面附上了代码

最初，“测试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>

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

---

您只需使用一个类即可：

---

一切都应该比你想象的容易得多。您应该删除内联javascript事件处理程序。并使用jquery切换机制：

然后，您的javascript代码可能会变得如此简短：

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

有关示例，请参见更新的修补程序：

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

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

在这里工作的修补匠：

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

---

参见tinker:

听起来你想要一个手风琴：或者，你可以使用下面的Javascript（删除HTML中的内联Javascript，只使用“#”）：

---

这是聪明的想法。演示效果非常好。非常感谢您抽出时间阅读我的问题并给出准确的答案。选择绿色勾选，然后从中学习：-D这是一个选项。更容易查找css属性（如果设置为“无”slideDown，否则为slideUp）。“不过，看看我的答案就知道了。”嘿，烤面包。这里唯一的问题是，儿童形象不再互换。有什么想法吗？在你的样本中，我看不到任何图像。你能发布相关的html代码，更新你的tinker吗？谢谢。我会努力的。很抱歉在我最初的帖子中出现混乱。我搞砸了。谢谢你的回答。不幸的是，这个例子没有把我的img代码保存在那里

jQuery（this）.parent（'.grid_4'）.children（）.find（'img.small'）.attr（'src'，'/wp content/themes/boilerplate/images/image_corner___onstate.png'）
var duration, $newboxes2;
$('.grid_4').bind('click', function () {
  $newboxes2 = $(this).find('.newboxes2');
  duration = $newboxes2.css('display') === 'none' ? 200 : 600;
  $(this).find('.newboxes2').slideToggle(duration);
});

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

(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);