根据当前幻灯片隐藏时间线的子部分？

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应该可以工作，但是出于某种原因，它不想隐藏这三个小节。也不会引发错误。这是我的工作页面。

我会继续研究一个解决方案，但如果你们中的任何一个能为我指明正确的方向，我将非常感激！

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

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

Answer 1

最新答复：

对主内容和页脚时间线都使用包含div。使用jQuery在这个外部div上设置类，并使用css选择器相应地显示正确的子菜单项。

这里最新的小提琴

原来的答案：

下面是一种快速而肮脏的方法：

$('.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;
}

小提琴在这里