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

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

1 个答案: