javascript - 隐藏基于当前幻灯片的时间轴的子部分？

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 .

我会继续寻找解决方案，但如果你们中的任何人能指出正确的方向，我将不胜感激!

---

已更新以隐藏所有子导航并使用 javascript 显示:

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

Answer 1

更新的答案:

对主要内容和页脚时间轴使用包含 div。使用 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