Question

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

最初，“测试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比你的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);
});

修补那些在这里工作：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);

如何在jQuery中单击时滑动div

3 个答案: