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

Question

我正试图集中精力隐藏和显示两个 UL。我正在尝试创建产品规范表。如果我能得到一些帮助来完成这个，它已经晚了，我在过去一两个小时里一直在努力......

你可以在这里看到一个活生生的例子:http://saeledlights.com/products/led-light-bars/high-performance-single-row/

产品规范表的外观:

场景:

当用户访问产品页面时，first-toggle 将始终可见。当他们点击第二个/第三个/第四个开关时，它会改变 <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() 已弃用