0

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

最初，'Test 1' & 'Test 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);
          }
     });
}
4

3 回答 3

0

一切都应该比你想象的容易得多。你应该删除你的内联 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

与您的图像交换代码。这段代码甚至可以短 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

于 2013-01-07T16:18:08.120 回答
0

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

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');
     });
}
于 2013-01-07T16:10:35.640 回答
0

听起来您想要一个手风琴： 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);
于 2013-01-07T17:10:54.590 回答