侧栏导航

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. 
     }) 
    }) 
}) 

Fiddle