jquery - jQuery 菜单中未显示 div 标签

Question

我有一个菜单，当我单击一个按钮时，一个 div 框会显示为相应的选项。它工作得很好，但我似乎唯一想不明白的是如何让我放置在框内的 div 显示而不是显示为display:hidden.

我试过添加.css("display","block");它，但这只是让事情变得有点疯狂。这是我现在所在的位置：FIDDLE。

如果对 CSS 或 JS 进行了任何更改，请告诉我您更改了什么以使其正常工作？

我什至在第一个和第二个框中添加了一些 div 以表明它们没有出现。

Answer 1

我花了一段时间才弄清楚你在问什么，你的 css 把一切都推到了右边，但我认为这就是你要找的东西？http://jsfiddle.net/GbMRx/3/

$(function () {
    $('.button').on('click', function () {
        var el = $('#cnt' + this.id.replace('btn', ''));
        $('#content-new div').not(el).animate({
            height: "toggle",
            opacity: "toggle"
        }, 100).hide();
        el.toggle();
        el.children("div").toggle();
    });
});

我也刚刚切换了孩子们。

另一种选择（可能是更好的选择）是只隐藏/切换第一级儿童...... http://jsfiddle.net/GbMRx/4/

JS：

        $('#content-new > div').not(el).animate({...

CSS：（从中删除display:none并#content-new div添加）

#content-new>div {
    display:none;
}

...我开始思考，您可能一开始只影响第一级子 div？如果这是真的，这可能是你想要的......除了把所有的都#content-new div变成#content-new>div...... http://jsfiddle.net/GbMRx/5/