在具有相同类的页面上的隐藏 Div 之间切换会影响所有 Div

Question

我的页面上有 2 个带有单独 ID 的 div。在这些 div 中，我有一个共享同一类的无序列表 (.stats-nav)：

<div id="product1">
<ul class="stats-nav">
    <li class="stat-cat1"><a href="">Ingredients</a></li>
    <li class="stat-cat2"><a href="">Nutrition Info</a></li>
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li>
</ul>
</div><!--end product1-->

<div id="product2">
<ul class="stats-nav">
    <li class="stat-cat1"><a href="">Ingredients</a></li>
    <li class="stat-cat2"><a href="">Nutrition Info</a></li>
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li>
</ul>
</div><!--end product2-->

一次仅显示 1 个 div；另一个是隐藏的（显示/隐藏）。列表项也是如此：一次仅显示一个。默认状态是“成分”。

我正在使用 Jquery 的 live 来绑定它：

$("li.stat-cat1 a").live('click', function() {
$(".nutritional-info").show();
return false;
});

我遇到的问题是，如果我正在查看 #product2 并单击“营养信息”，然后单击 #product1，它将显示 #product1 的正确信息，但它会从我上次停下来的“营养信息”开始，而不是默认状态“成分”。

有没有办法让我“清除”div 的最后状态？

（如果我通过 ajax .load 加载它，内容会按预期刷新，但我不再希望使用 ajax 方法）。

谢谢！

Answer 1

我不确定我是否理解正确，但看起来您正在将事件应用于两个“li.stat-cat1”。听起来你需要隔离每一个。或者您需要引用与点击相关的单个链接。我没有看到任何名为“营养信息”的课程，所以我猜测它是 ul 的子级。

$("li.stat-cat1 a").live('click', function() {
    $(".nutritional-info").hide();//hide all
    $(this).closest('stats-nav').find(".nutritional-info").show();
});

编辑：
经过进一步思考，您可能只需要向单击事件添加一个新类。

$("li.stat-cat1 a").live('click', function() {
    $(".nutritional-info").show();
    $(".nutritional-info").addClass('selected')
    return false;
});

然后您可以稍后通过以下方式找到它：

$(".nutritional-info.selected")

Answer 2

我认为你的问题是你的选择器 $(".nutritional-info") 正在查找页面上的所有元素，无论它们的父 div 是否可见。要过滤操作以仅作用于可见产品，请尝试以下操作：

$("li.stat-cat1 a").live('click', function() {
    $("div:visible .nutritional-info").show();
    return false;
});