側欄導航

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