jquery - 侧边栏导航

Question

并且似乎还不能把我的头绕在它周围。我有一个带有内容的侧栏导航。我希望在单击父菜单时显示内容，因此必须隐藏其他内容。单击其他父菜单时，其他父菜单将隐藏。

这是CSS

 .sidebarContainer {
    position: relative;
    background: #f1f2f3;
    width: 80%;
    margin:auto;
    margin-bottom: 2%;
    padding: 1%;             
    overflow: hidden;
    border:blue;
    height:auto;
    clear:both;
    border:5px solid yellow;

}
.sidebarheading {
    width:15% auto;
    border:5px solid green;
}
.sidebarContainer .sidebarheading > .sidebarContent {
    position:relative;
    float: right;              
    border:5px solid red;
    right:450px;

这是html

<div class="sidebarContainer">    
<div class="sidebarheading">        
    <h1>Heading1</h1>
        <div class="sidebarContent">
            <p class="content2">Hey Wassup</p>
        </div>
</div>


<div class="sidebarheading">
    <h1>Heading2</h1>
        <div class="sidebarContent">
            <p class="content1">Hey Wassup</p>
         </div>
</div>

这是jQuery

<script>
$(document).ready(function () {
    $('.sidebarheading').click(function () {
        $('.sidebarContent').hide('slow', function () {
            $('.sidebarContent').html($('sidebarContent').html());
            $('.sidebarContent').fadeIn('slow');
        })
    })
})

边界用于测试目的。任何帮助，将不胜感激 ：）

Answer 1

像这样？

$(document).ready(function () {
    $('.sidebarContent:gt(0)').hide(); // Show the first one by default

    $('.sidebarheading').click(function () {
        var $this = $(this);
        $('.sidebarContent').hide('slow', function () { // On click hide all
           $this.find('.sidebarContent').fadeIn('slow'); //show the content which is inside the clicked heading.
        })
    })
})

小提琴