Question

我有一个show / hide脚本，我想扩展，但对扩展它的功能最简单的方法感到好奇。

目前您可以点击主链接，然后打开相应的div，其中包含更多链接。

http://jsfiddle.net/nX8mr/

我想扩展它，以便每个列表项都有一个div / image（我已经包含了一个仅用于示例的图像），它在被点击之前一直处于隐藏状态，但总是出现在右侧的相同位置。所以功能更像......

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

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

任何帮助/建议都将不胜感激。

更新

似乎复制show / hide似乎最简单。这最终做到了......

$('[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

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

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

JavaScript：我怎样才能轻松扩展这个显示/隐藏功能？

1 个答案: