jQuery切换顺序

Question

我试图切换一些div，同时在链接上设置“活动”状态。以下是我的代码。

$(".product_buy").hide(); 
$(".product_geo").hide(); 

$("a.buy, a.geo").click(function() 
    { 
     $("#" + this.className + "_" + this.rel).slideToggle("fast"); 
     $(this).toggleClass("item_active"); 

     if (this.className == "geo") 
      { 
       $("#info_" + this.rel).slideToggle("fast"); 
      } 

     return false; 
    }); 


<ul class="title_menu"> 
    <li class="item"><a href="javascript:void(0);" class="geo" rel="blabla" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="javascript:void(0);" class="buy" rel="blabla" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div class="product_buy" id="buy_blabla"> 
    <div class="block"> 
     <p>Buy bla bla</p> 
    </div> 
</div> 

<div class="product_geo" id="geo_blabla"> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
</div> 

<div class="prod_info" id="info_blabla"> 
    <p>Info bla bla</p> 
</div> 

它切换，但不是全部在同一时间。如果同时显示两个div“buy”和“geo”，但链接的“活动”状态似乎会让事情变得糟糕。

我是一个noob，所以随时嘲笑我。

编辑：解决之前，我看到了尼克的答案，所以他的解决方案可能会更好。

$(".product_buy").hide(); 
    $(".product_geo").hide(); 

    $("a.buy, a.geo").click(function() 
     { 
      var itemType = $(this).attr("rev"); 
      var itemName = $(this).attr("rel"); 

      $("#" + itemType + "_" + itemName).slideToggle("fast"); 
      $(this).toggleClass("item_active"); 

      if (itemType == "geo") 
       { 
        $("#info_" + itemName).slideToggle("fast"); 
       } 

      return false; 
     }); 

Answer 1

我在这里建议一个总体的改变，也会在没有JavaScript的情况下正常退化。使用href去你想要的ID，这样的元素：

<ul class="title_menu"> 
    <li class="item"><a href="#geo" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="#buy" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div id="buy" class="content"> 
    <div class="block"> 
    <p>Buy bla bla</p> 
    </div> 
</div> 

<div id="geo" class="content"> 
    <div> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
    </div> 

    <div class="prod_info"> 
    <p>Info bla bla</p> 
    </div> 
</div> 

那么你的jQuery也得到多简单，就像这样：

$(".content").hide(); 
$("ul.title_menu a").click(function(e) { 
    $(this.hash).slideToggle("fast"); 
    $(this).toggleClass("item_active"); 
    e.preventDefault(); 
}); 

You can test it out here。它的作用是使用href="#geo"作为$("#geo")选择器来切换正确的元素。该class="content"是这样我们就可以隐藏他们... ...你也可以使用相同的类作为一种机制，只显示一次一个（通过隐藏其他内容元素，like this。

的另一大好处是这里没有启用JavaScript，所有div将显示，链接将滚动到适当的元素...一个很好的退化视图，仍然适用于用户。