Question

我的起点是一个包含this四个部分的页面。

我尝试在每个部分中添加三个“内部部分”，例如this。

我想实现以下目标，但我不知道如何：

只有点击才能看到三个内部部分。因此，起始图像应该看起来像this。点击后，比如说，第1节应该出现三个内部部分。
点击第1节，应该可以看到A-C部分。单击A部分可以使列表框可见。单击A部分应返回到第1部分，其中包含A-C部分的概述。要回到第1-4节，我将创建一个后退按钮。我知道怎么做。

目前，在各部分之间来回导航的代码是：

$('.section').on('click', function(e){
  $(this).toggleClass('expanded'); 
  $('.innersection').on('click',   function(e){  
    $(this).toggleClass('expanded'); 
  });
});  

$('.section').on('click', function(e){
  $(this).toggleClass('collapsed'); 
});  

$('.innersection').on('click',   function(e){  
    $(this).toggleClass('collapsed'); 
});

感谢任何帮助。 THX。

Answer 1

我认为你可以用这样的css实现它：

.innersection {
  display: none;
}

.section.collapsed>.innersection {
  display: none;
}

.section.expanded>.innersection {
  display: block;
}

第二个问题的解决方案可以用类似的方式解决。

部分内的部分

1 个答案: