Javascript jQuery隐藏嵌套div

我有三个级别的div。当我从action div中选择button时，应该会显示一些选项重要：隐藏上次显示的选项和类别，当我单击一些选项按钮时，会显示一些类别。如何使它看起来比在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>

---

您的标记中有很多错误。按钮标签的使用方式与img标签不同。按钮标记具有开始和结束元素

此外，你的div需要用一个标签来代替

我草拟了一些您可能正在寻找的基本功能

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

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

这段代码隐藏了以option开头的所有div，然后显示其中一个div

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

---

为按钮分配一个类并使用$.button-class.toggle？但是在哪里，为什么？toogle将显示应隐藏的元素。我总是可以使用$.category.hide和show只需要一个$option1category1.show，但它有点蹩脚？按钮元素都错了！！！例如，它不存在元素，您应该将其编写为。请看我的错误，我编写了半个伪代码，p:commandButton应该无处不在。我将替换它。我修复了所有错误。关于解决方案，我有50多个按钮。我正在寻找比为每个按钮创建单击函数更好的解决方案。@user2771738然后您将需要Arun P建议的类似数据目标的标识符。是的，现在只剩下一些primefaces按钮中有这样的属性：