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

我正试图抓住我的头，隐藏和显示两个超链接。我正在尝试创建一个产品规格表。如果我能得到一些帮助来完成这项工作，那就太晚了，我已经为此奋斗了一两个小时

您可以在此处看到一个实例：

产品规格表的外观：

脚本： 当用户访问产品页面时，第一个切换将始终可见。当他们点击第二个/第三个/第四个开关时，它将改变

并隐藏所有其他开关。

和切换按钮具有匹配的类名，但按钮末尾有一个-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 1.9开始，toggle就不推荐使用（据我所知）

所以从我的理解来看。。我创建了这个，这样你可以看一看

我使用了

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 
});

$（'ul'）。不是（'first'）。隐藏（） 见此：

注意：从jQuery 1.9和更高版本开始，toggle（）就不推荐使用了
你能为此创建一个提琴吗？？？我喜欢这个解决方案，出于样式设计的目的做了一些修改。我不希望依赖jquery来隐藏所有附加规范。因此，我可能会设置一些初始样式，并使用jquery删除该类，但这是完美的。如果我能赏金，我会为此付出代价的。谢谢你！
<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

 $('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 
});

$(" 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();
});