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

【问题标题】：JavaScript: How could I easily extend this show/hide functionality?JavaScript：如何轻松扩展此显示/隐藏功能？
【发布时间】：2011-03-21 12:57:58
【问题描述】：

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

目前您可以单击主链接，它会打开相应的 div，其中包含更多链接。

http://jsfiddle.net/nX8mr/

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

1) 点击主链接
2) 使用更多链接打开相应的 Div
3) 显示第一个列表项 div/image
4) 单击 Div 中的任何其他链接，然后显示 List Items 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;
    });

【问题讨论】：

标签： javascript css

【解决方案1】：

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

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

【讨论】：