javascript - .show 元素和 .hide 元素

Question

我有这个问题：

• 我有 6 个“外部”div，每个里面都有一个 img 标签。
• 每个 6 个 div 后面是另一个 div，每个 6 个 div 的内容

我希望当我单击一个“外部”div 时隐藏所有外部 div 并向我显示下一个 div 内容。

这就是功能。它在那里工作http://jsfiddle.net/Weinz/jdFRw/4/

但是在测试站点上只隐藏 .outerDiv 不显示下一个 .innerDiv

$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
    $(".innerDiv").click(function() {
        $(".outerDiv").show();
        $(".innerDiv").hide();
    });
});

真正的html代码是这样的

<div class="block outerDiv"><a href="#"><img src="images/placeholder.jpg" width="165" height="74" alt="Temp" /></a></div>
     <div class="container innerDiv" style="display:none;">

我认为问题出在 .next 上，但我尝试了不同的选项，但没有任何效果。

如果我没有在 innerDiv 中设置显示，它可以工作......

Answer 1

尝试这个

$(function() {
$(".outerDiv").click(function() {
    $(".outerDiv").hide();
    $(".innerDiv").hide();
    $(this).next("div").show().css('display', 'block');
});
$(".innerDiv").click(function() {
    $(".outerDiv").show();
    $(".innerDiv").hide();
});

});