基于当前幻灯片隐藏时间线的子部分

Hiding subsections of a timeline based on current slide?

本文关键字：时间线 于当前 幻灯片 隐藏      更新时间：2023-09-26

我的产品导览有一个时间表，有 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解决方案，以允许我在.active-tourdiv具有一类target-panel时隐藏connect-sub，convert-sub和optimize-sub。

我通过使用.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个子部分。也没有抛出任何错误。这是我的工作页面。

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

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

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

更新的答案：

对主要内容和页脚时间线都使用包含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;
}

在这里摆弄

相关文章：