单击链接时，jquery在两个UL之间切换

Question

我试图抓住我的头，隐藏并展示两个UL。我正在尝试创建产品规格表。如果我可以得到一些帮助来完成这个，它已经很晚了，我在最后一两个小时内一直在努力...

您可以在此处查看实时示例：http://saeledlights.com/products/led-light-bars/high-performance-single-row/

产品规格表的外观如下：

情景：

当用户访问产品页面时，第一个切换将始终可见。当他们点击第二/第三/第四个切换时，它将更改<ul>并隐藏所有其他人。 <ul>和切换按钮具有匹配的类名，除了按钮在末尾有-toggle。

这是html：

<div class="single-product row">
  <div class="grid_3 alpha">
    <img src="http://example.com/wp-content/uploads/2012/12/SW12231_thumbnail.png" alt="SW12231_thumbnail" width="200" height="200" class="alignnone product-image size-full wp-image-151" />
  </div>
  <div class="grid_9 product-specs-container omega">
    <ul class="product-specs first">
      <li><strong>MODEL:</strong>SW12231-6F</li>
      <li><strong>WATTS:</strong>24W</li>
      <li><strong>TYPE:</strong>FLOOD</li>
      <li><strong>LED's:</strong>6 x 5W Cree</li>
      <li><strong>AMP DRAW 12V/24V:</strong>1.65/0.93</li>
      <li><strong>RAW LUMENS:</strong>2250</li>
      <li><strong>IP RATING:</strong>68</li>
      <li><strong>BEAM DISTANCE:</strong>1083'</li>
      <li><strong>PEAK BEAM INTENSITY (cd):</strong>22400</li>
      <li><strong>SIZE:</strong>7.38 x 1.6 x 3.3</li>
      <li><strong>VOLTAGE:</strong>9V-30V</li>
    </ul>
    <ul class="product-specs second">
      <li><strong>MODEL:</strong>1234124412231-6F</li>
      <li><strong>WATTS:</strong>12341244W</li>
      <li><strong>TYPE:</strong>12341244OOD</li>
      <li><strong>LED's:</strong>12341244x 5W Cree</li>
      <li><strong>AMP DRAW 12V/24V:</strong>1234124465/0.93</li>
      <li><strong>RAW LUMENS:</strong>1234124450</li>
      <li><strong>IP RATING:</strong>12341244</li>
      <li><strong>BEAM DISTANCE:</strong>1234124483'</li>
      <li><strong>PEAK BEAM INTENSITY (cd):</strong>12341244400</li>
      <li><strong>SIZE:</strong>1234124438 x 1.6 x 3.3</li>
      <li><strong>VOLTAGE:</strong>12341244-30V</li>
    </ul>
    <div class="grid_9 alpha omega">
      <div class="product-thumbnail"><a href="#" class="first-toggle">SPOT</a></div><div class="product-thumbnail"><a href="#" class="second-toggle">FLOOD</a></div>
    </div>
  </div>
</div>

到目前为止我还有Jquery。

$('.first-toggle').toggle(function(){
    var first   = $(this).closest('.single-product').children('.product-specs-container').children('.first');
    var second  = $(this).closest('.single-product').children('.product-specs-container').children('.second');
    second.removeClass('hidden current').addClass('hidden');
    first.removeClass('hidden current').addClass('current');
}, function(){
    second.removeClass('hidden current').addClass('hidden');
    first.removeClass('hidden current').addClass('current');
});

Answer 1

请参阅：http://jsfiddle.net/czSU8/2/

$(" ul.second").addClass('hidden');

  $('.first-toggle').click(function(){
  var first   = $(this).closest('.single-product').children('.product-specs-container').children('.first');
  var second  = $(this).closest('.single-product').children('.product-specs-container').children('.second');
  second.removeClass('hidden current').addClass('hidden');
  first.removeClass('hidden current').addClass('current');
  event.preventDefault();
});

$('.second-toggle').click(function(){
   var first   = $(this).closest('.single-product').children('.product-specs-container').children('.first');
  var second  = $(this).closest('.single-product').children('.product-specs-container').children('.second');
  first.removeClass('hidden current').addClass('hidden');
  second.removeClass('hidden current').addClass('current');
  event.preventDefault();
});

注意：自jQuery 1.9及更高版本起，不推荐使用toggle（）

Answer 2

$(" ul.second").addClass('hidden');
$('a.first-toggle').click(function(){
      $('ul.second').toggle();
      $('ul.first').toggle();         
};


$('a.second-toggle').click(function(){
      $('ul.second').toggle();
      $('ul.first').toggle();         
};

参考http://api.jquery.com/toggle/

Answer 3

你做错了..

在切换功能中你不能有两个回调.... 注意：从jquery 1.9开始不推荐使用toggle（据我所知）......

所以从我所理解的......我创建了这个fiddle，以便你可以看看

我使用了hide()和slideDown()给它一个切换效果......

这是代码..

<强> HTML

<div class="product-thumbnail"><a href="#" class="first">SPOT</a></div> // removed -toggle
<div class="product-thumbnail"><a href="#" class="second">FLOOD</a></div> // removed -toggle

<强> jquery的

 $('ul').not('.first').hide();  <-- hide all ul expect first here
 $('div.product-thumbnail a').click(function(){  //call click function in buttons
    var classname=$(this).attr('class'); // get the clicked button class..i removed `-toggle` here so that i can handle this with one function
   $('ul').hide(); // hide all ui first 
   $('ul.'+classname).slideDown(); //slidedown the one you clicked 
});

注意：这将适用于多个<ui>只是应该创建按钮，按钮类应该与<ui>的类