.show元素和.hide元素

Question

我有這個問題：

• 我有6個“外部” div，每個div中都有一個img標簽。
• 每個6格之后是另一個div，每個6格的內容

我想當我單擊一個“外部” 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();
});

}）;