Jquery 如何使子元素可见和不可见保持正确的父子关系

我做了一个有孩子的div，那些孩子也有孩子。我想当用户点击显示按钮时，子元素就会出现。同时，将设置隐藏按钮而不是显示按钮。如果用户单击隐藏按钮，则会发生相反的事件。我可以成功地放入一些jQuery代码。但问题是，当任何人单击Show按钮时，它将显示每个子元素和子元素的子元素。但是，我希望如果用户单击某个元素上的“显示”按钮，它将只打开A的子元素，如果用户单击A的子元素上的“显示”按钮，则只会显示A的子元素

这是我的工作示例：

---

我只会在每个级别使用一个按钮，并相应地更新：

---

另外，如果使用这种方法，请不要忘记删除以下CSS:.hideButton{display:none；}谢谢！但是，我看到了另一个问题。如果它展开了任何子级的子级，并且当时如果有人单击主父级li上的“隐藏”按钮，然后再次单击主父级li上的“显示”按钮，它也会展开上一个子级的子元素，因为它在从主父级隐藏之前是打开的。那么，当用户单击父div上的hide按钮时，如果其中任何一个打开，它也会隐藏子元素吗？好的，再看一看-这应该会做得很完美！多谢各位

<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>

<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');
});