Javascript CSS手风琴点击关闭

我有纯CSS手风琴，我希望每个面板关闭点击。我可以只使用CSS实现这一点，还是必须添加JavaScript

#手风琴输入：未（：选中）+div{
显示：无；
}
#手风琴输入：选中+div{
显示：块；
}
#手风琴输入{
宽度：0px；
高度：0px；
边际：0px；
不透明度：0.0；
}
#手风琴标签{
光标：指针；
显示：内联块；
宽度：750px；
背景：#ffffff；
颜色：#ff6600；
字体系列：开放式SAN；
边框：1px实心#ff6600；
字体大小：24px；
填充：25px 20px；
边际：0px；
}
#手风琴师{
宽度：750px；
背景：白色；
边框：1px纯色灰色；
填充：15px 20px；
}
#手风琴李{
列表样式：无；
}
分区卷轴{
最大高度：1050px；
溢出：自动；
}
.及时流：不及时（.及时议程）。及时事件{
最小高度：92px；！重要
}

单曲棍球


锦标赛


信息
Lorem ipsum dolor sit amet，是一位杰出的献身者。


排名/时间表
Lorem ipsum dolor sit amet，是一位杰出的献身者。

根据我上面的评论： 如果您需要通过单击项目来取消选择，则需要从单选按钮切换到复选框。这将导致允许打开多个面板。如果您必须让它在新面板打开时自动关闭其他面板，并且如果您再次单击它，它必须关闭打开的面板，那么您至少需要一点javascript

下面是您的代码，有两个小的修改：

我已从单选按钮改为复选框

我添加了一个小小的jQuery代码片段，它强制执行“accordio”方法，在打开面板时关闭其他面板

jQuery（函数（$）{
$（'input[type=“checkbox”]”）。在（'change'，function（）上{
let state=$（this）.is（':checked'）；
$（'input[type=“checkbox”]”）。prop（'checked'，false）；
$（this.prop（'checked'，state）；
});
});
#手风琴输入：未（：选中）+div{
显示：无；
}
#手风琴输入：选中+div{
显示：块；
}
#手风琴输入{
宽度：0px；
高度：0px；
边际：0px；
不透明度：0.0；
}
#手风琴标签{
光标：指针；
显示：内联块；
宽度：750px；
背景：#ffffff；
颜色：#ff6600；
字体系列：开放式SAN；
边框：1px实心#ff6600；
字体大小：24px；
填充：25px 20px；
边际：0px；
}
#手风琴师{
宽度：750px；
背景：白色；
边框：1px纯色灰色；
填充：15px 20px；
}
#手风琴李{
列表样式：无；
}
分区卷轴{
最大高度：1050px；
溢出：自动；
}
.及时流：不及时（.及时议程）。及时事件{
最小高度：92px；
！重要
}



单曲棍球


锦标赛


信息
Lorem ipsum dolor sit amet，是一位杰出的献身者。


排名/时间表
Lorem ipsum dolor sit amet，是一位杰出的献身者。

您需要使用JS。创建一个ID为“close”的按钮

jQuery(function($) {
   $( "#close" ).click(function() {
       $( "#target" ).toggle();
    });
});

这将通过JS隐藏它
或使用

隐藏将被定义为：
隐藏：显示：无
 这很难看，但它在没有JavaScript的情况下提供了您想要的东西

您可以使用标准链接和

链接到包含目标手风琴项目的
li
。然后显示项目并切换打开和关闭链接

就个人而言，我会选择一个简单的javascript增强选项


/*隐藏子div*/
#手风琴{
显示：无；
}
#拉手风琴{
显示：无；
}
/*显示目标div*/
#手风琴李：目标>div{
显示：块；
}
/*切换打开和关闭链接*/
#手风琴李：目标>打开{
显示：无；
}
#手风琴李：目标>a关闭{
显示：块；
}
#手风琴a{
光标：指针；
显示：内联块；
宽度：750px；
背景：#ffffff；
颜色：#ff6600；
字体系列：开放式SAN；
边框：1px实心#ff6600；
字体大小：24px；
填充：25px 20px；
边际：0px；
文字装饰：无；
}
#手风琴师{
宽度：750px；
背景：白色；
边框：1px纯色灰色；
填充：15px 20px；
}
#手风琴李{
列表样式：无；
}
分区卷轴{
最大高度：1050px；
溢出：自动；
}
.及时流：不及时（.及时议程）。及时事件{
最小高度：92px；！重要
}






Lorem ipsum dolor sit amet，是一位杰出的献身者。


Lorem ipsum dolor sit amet，是一位杰出的献身者。

你在找这样的东西吗。它是响应性的，因此收缩页面以获得一致性，不能在单击时存储某个内容的状态。您需要JS至少能够在DOM中翻转CSS类名。@Diodeus JamesMacFarlane-恕我直言不同意。您可以使用复选框和/或单选框，并结合同级选择器来完成此操作。我使用纯CSS解决方案来处理各种类似的应用程序。@Diodeus JamesMacFarlane查看上面的钢笔。如果您提供了一个实际的
jQuery(function($) {
    $( "#close" ).click(function() {
         $( "#target" ).addClass('hidden');
     });
});