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”是可以的，但是链接的“active”状态似乎会让事情变得混乱。

我是菜鸟，请随意嘲笑我。

编辑：在我看到尼克的答案之前就解决了这个问题，所以他的解决方案可能更好。

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

您可以在这里测试一下。其作用是使用 href="#geo" 作为 $("#geo") 选择器来切换正确的元素。 class="content" 是这样我们就可以将它们全部隐藏...您还可以使用同一个类作为一种机制，一次只显示一个（通过隐藏其他 内容元素，像这样，

这里的另一个大好处是无需启用 JavaScript 。 div 将显示，链接将滚动到适当的元素...一个不错的降级视图，但仍然对用户有效。