我做了一个有孩子的div,那些孩子也有孩子。我想当用户点击“显示”按钮时,会出现子元素。同时将设置“隐藏”按钮而不是“显示”按钮。如果用户点击“隐藏”按钮,将发生相反的事件。我可以成功地放一些jQuery代码。但问题是,当任何人点击“显示”按钮时,它会显示每个子元素和孩子的子元素。但是,我希望如果用户单击“A”元素上的“显示”按钮,它将只打开A的孩子,如果他们点击A的孩子上的“显示”按钮,则只有A的孩子的孩子应该出现
以下是我的工作示例:http://jsfiddle.net/learner73/PcNu2/
<div class="box">
<ul>
<li>
<div class="row">
<p class="left">A</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- A's Child 1</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A's Child 1's child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A's Child 1's child 2</p>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">- A's Child 2</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A's Child 2's child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A's Child 2's child 2</p>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">B</p>
<a href="#" class="right showButton">Show</a>
<a href="#" class="right hideButton">Hide</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- B's Child 1</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
答案 0 :(得分:0)
我会在每个级别只使用一个按钮并相应地更新: http://jsfiddle.net/sbritton/J6c3z/
<div class="box">
<ul>
<li>
<div class="row">
<p class="left">A</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- A's Child 1</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A's Child 1's child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A's Child 1's child 2</p>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">- A's Child 2</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child child2">
<li>
<div class="row">
<p class="left">- A's Child 2's child 1</p>
</div>
</li>
<li>
<div class="row">
<p class="left">- A's Child 2's child 2</p>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="row">
<p class="left">B</p>
<a href="#" class="right showButton">Show</a>
</div>
<ul class="child">
<li>
<div class="row">
<p class="left">- B's Child 1</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
$(".box").on('click','.showButton', function(){
$(this).parent().next("ul.child").show();
$(this).removeClass('showButton').addClass('hideButton').text('Hide');
});
$(".box").on('click','.hideButton', function(){
$(this).closest('li').find(".child").hide();
$(this).closest('li').find('.hideButton').removeClass('hideButton').addClass('showButton').text('Show');
});