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/

Div标签没有出现在jQuery菜单中

1 个答案: