jquery - 单击链接时，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();
});

注意：toggle() 自 jQuery 1.9 及更高版本起已弃用

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开始不推荐使用切换（据我所知）......

所以根据我的理解..我创造了这个小提琴，这样你就可以看看

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

注意：这将适用于多个，只是应该创建按钮并且按钮类应该与's 类<ui>完全相同<ui>