JavaScript:如何轻松扩展此显示/隐藏功能？

Question

我有一个要扩展的显示/隐藏脚本，但对扩展其功能的最简单方法感到好奇。

目前你可以点击一个主链接，它会打开相应的 div，里面有更多的链接。

http://jsfiddle.net/nX8mr/

我想扩展它，以便每个列表项都有一个 div/图像(我包含一个图像只是为了示例)在单击之前隐藏，但将始终出现在右侧的相同位置。所以功能更像是......

1) 点击主链接
2) 打开带有更多链接的相应 Div
3) 显示第一个列表项 div/image
4) 单击 Div 中的任何其他链接，然后显示列表项 div/image 并隐藏上一个

不确定是否尝试为单个列表 div/图像包含另一个显示/隐藏？

如有任何帮助/建议，我们将不胜感激。

更新

复制显示/隐藏似乎最简单。这最终做到了......

$('[class^=showHide], [class^=showHide] img').hide();

$('[class^=link]').click(function() {
    var x =  $(this).attr("className");
    var $item = $('.showHide-' + x);
    if (!$item.is(":visible")) $('[class^=showHide]').hide();
    $('.showHide-' + x).slideToggle();
    return false;
    });

$('[class^=showHide] li').click(function() {
    var x =  $(this);
    if (!$(x).find('img').is(":visible")) $('[class^=showHide] li img').hide();
    $(x).find('img').slideToggle();
    return false;
    });

Answer 1

Not sure if to try and include another show/hide for the individual list div/image or not?

这就是我会做的。您可以复制您正在做的显示/隐藏链接的操作，也可以对图像进行操作。