根據當前幻燈片隱藏時間軸的子部分？

Question

我有一個時間表我的產品之旅，有4個主要部分，之間4-5小節，它被設置這樣的：

<ul class="slideshow-timeline"> 
    <li class="active-target-main main-section"><a href="#target">Target</a> 
     <ul class="current-section target-sub"> 
      <li><a href="#target-1">Donor Profiles</a></li> 
      <li><a href="#target-2">Segmentation</a></li> 
      <li><a href="#target-3">Custom Lists</a></li> 
      <li><a href="#target-4">RFM Analysis</a></li> 
      <li><a href="#target-5">Wealth Screening</a></li> 
     </ul> 
    </li> 
    <li class="main-section"><a href="#connect">Connect</a> 
     <ul class="current-section connect-sub"> 
      <li><a href="#connect-1">Email Marketing</a></li> 
      <li><a href="#connect-2">Social Media</a></li> 
      <li><a href="#connect-3">Direct Mail</a></li> 
      <li><a href="#connect-4">Welcome Series</a></li> 
     </ul> 
    </li> 
    <li class="main-section"><a href="#convert">Convert</a> 
     <ul class="current-section convert-sub"> 
      <li><a href="#convert-1">Donation Forms</a></li> 
      <li><a href="#convert-2">Automated Receipts</a></li> 
      <li><a href="#convert-3">Events</a></li> 
      <li><a href="#convert-4">Member Mgmt</a></li> 
      <li><a href="#convert-5">Moves Mgmt</a></li> 
     </ul> 
    </li> 
    <li class="main-section"><a href="#optimize">Optimize</a> 
     <ul class="current-section optimize-sub"> 
      <li><a href="#optimize-1">Analytics</a></li> 
      <li><a href="#optimize-2">Campaigns/Funds/Appeals</a></li> 
      <li><a href="#optimize-3">A/B Testing</a></li> 
      <li><a href="#optimize-4">Task Management</a></li> 
     </ul> 
    </li> 
</ul> 

我要尋找一個解決JS讓我躲connect-sub,convert-sub和optimize-sub，而.active-tour div具有一類target-panel。

我試圖通過使用.css，但想知道是否會有更優雅的解決方案？

$(function() { 
if($('.active-tour').hasClass('target-panel')) { 
     $(".connect-sub").css("display", "none"); 
     $(".convert-sub").css("display", "none"); 
     $(".optimize-sub").css("display", "none"); 
} 
}); 

由於timeline和slides設置爲position:absolute和position:fixed它不是在頁面流坐，所以我不能只瞄準它在CSS。

從理論上講，這個JS應該可以工作，但由於某些原因，它不想隱藏3個子部分。沒有錯誤被拋出。 Here is my working page。

我會繼續尋找解決方案，但是如果你們中的任何一位能夠指引我朝着正確的方向發展，我會非常感激！

---

更新隱藏所有subnavs使用JavaScript顯示：

$(function() { 
if($('.active-tour').hasClass('target-panel')) { 
     $(".target-sub").css("display", "block"); 
} 
}); 

Answer 1

更新答案：

使用包含分區兩者的主要內容和頁腳時間表。使用jQuery在此外部div上設置類，並使用css選擇器相應地顯示正確的子菜單項。

updated fiddle here

---

原來的答案：

這裏有一個快速和骯髒的方式做到這一點：

$('.main-section').on('click',function(){ 
    $('.main-section').removeClass('active-tour'); 
    $(this).addClass('active-tour'); 
}); 

.current-section{ 
    display:none; 
} 
li.active-tour .current-section{ 
    display:block; 
} 

fiddle here