Question

我有3个级别的div。当我从动作div中选择按钮时，应该显示一些选项（重要：隐藏最后显示的选项（和类别）），当我点击某个选项按钮时，会显示类别。如何让它看起来比编写onclick属性中的所有变体更清晰？（这只是一个例子，我在这里有更大的例子 - 许多选项，每个选项都有很多类别。）

<div id="action">
    <p:commandButton onclick="$('#option1').show(); "$('#option2').hide();"/>
    <p:commandButton onclick="$('#option1').hide(); "$('#option2').show();"/>
</div>

<div id="option1" style="display:none">
    <p:commandButton onclick="...?"/> 
    <p:commandButton onclick="...?"/>
</div>

<div id="option2" style="display:none">
    <p:commandButton onclick="...?"/>
    <p:commandButton onclick="...?"/>
</div>

<div id="option1category1" style="display:none">
    <p:commandButton />
</div>
<div id="option1category2" style="display:none">
    <p:commandButton />
</div>
<div id="option2category1" style="display:none">
    <p:commandButton />
</div>

Answer 1

标记中存在很多错误。 button代码与img代码的使用方式不同。 Button标签有一个起始和结束元素。

此外，您的div需要使用</div>代码关闭，而不是<div>。

我勾勒出了你可能正在寻找的一些基本功能。

$('#button1').click(function(){    
    $('div[id^="option"]').hide();
    $('#option1').show();
});

$('#button2').click(function(){   
    $('div[id^="option"]').hide();
    $('#option2').show();
});

此代码隐藏所有使用选项启动其ID的div，然后显示其中一个。

检查小提琴是否有完整的标记。

http://jsfiddle.net/ef4ux/

jQuery隐藏嵌套的div

1 个答案: