纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单

最新推荐文章于 2023-05-16 14:51:03 发布

置顶 TZOF_

最新推荐文章于 2023-05-16 14:51:03 发布

阅读量4k

点赞数 3

分类专栏： HTML CSS 文章标签： html css checkbox web app chrome

本文链接：https://blog.csdn.net/TZOF_/article/details/110246219

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单

实现不联动的下拉菜单核心思想：

input<type=“checkbox”>（复选框）
label和input的绑定
溢出隐藏和高度的转换
checked选择器

使用复选框的特性：只有非选中和选中两种状态。再将label和input进行绑定。

label的for和input的id进行绑定，可以实现点击label的时候input获取焦点。label和input可以不是紧挨的。

<input type="checkbox" id="one">
<main></main>
<label for="one">

注意：CSS选择器只能选择到本身下面的兄弟元素或者子元素，无法往上选择。

所以在HTML中我们要将复选框放到label上面。这样就能选择到所有到下拉菜单了。
再设置input的隐藏可以在页面中使复选框消失不会影响布局和美观。

<!-- HTML部分 -->
<input type="checkbox" id="one">
<input type="checkbox" id="two">
<label for="one">
<label for="two">

/* CSS部分 */
input[type="checkbox"]{
	display: none;
}

将下拉菜单放在label内并设置溢出隐藏和高度为0。

<!-- HTML部分 -->
<label for="one">
	<h2>下拉菜单1</h2>
	<ul>
		<li>下拉菜单1.1</li>
		<li>下拉菜单1.2</li>
	</ul>
</label>

/* CSS部分 */
label ul{
	overflow: hidden;
	height: 0;
}

配合checked选择器来选择到label元素下的下拉菜单并设置溢出不隐藏高度为auto，即可实现不联动的下拉菜单。

checked选择器：复选框被选中时。
～：兄弟选择器，可以选择到本元素下的所有兄弟元素。

<!-- HTML部分 -->
<input type="checkbox" id="one">
<input type="checkbox" id="two">
<main>
	<!-- <h1>代表网页中的其他内容</h1> -->
</main>
<label for="one">
	<h2>下拉菜单1</h2>
	<ul>
		<li>下拉菜单1.1</li>
		<li>下拉菜单1.2</li>
	</ul>
</label>
<label for="two">
	<h2>下拉菜单2</h2>
	<ul>
		<li>下拉菜单2.1</li>
		<li>下拉菜单2.2</li>
		<li>下拉菜单2.3</li>
	</ul>
</label>

/* CSS部分 */
#one:checked~label[for="one"]>ul{
	overflow: visible;
	height: auto;
}
#two:checked~label[for="two"]>ul{
	overflow: visible;
	height: auto;
}

下面是demo的完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不联动的下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        input[type="checkbox"]{
            display: none;
        }
        label{
            display: block;
        }
        label ul{
            overflow: hidden;
            height: 0;
        }
        #one:checked~label[for="one"]>ul{
            overflow: visible;
            height: auto;
        }
        #two:checked~label[for="two"]>ul{
            overflow: visible;
            height: auto;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="one">
    <input type="checkbox" id="two">
    <main>
        <!-- <h1>代表网页中的其他内容</h1> -->
    </main>
    <label for="one">
        <h2>下拉菜单1</h2>
        <ul>
            <li>下拉菜单1.1</li>
            <li>下拉菜单1.2</li>
        </ul>
    </label>
    <label for="two">
        <h2>下拉菜单2</h2>
        <ul>
            <li>下拉菜单2.1</li>
            <li>下拉菜单2.2</li>
            <li>下拉菜单2.3</li>
        </ul>
    </label>
</body>
</html>

demo源码：https://github.com/tzof/CSDN-DropDownList 点击转跳

仿苹果官网底部下拉菜单：https://github.com/tzof/APPLE2020 点击转跳

TZOF_

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单

纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想：input<type=“checkbox”>（复选框）label和input的绑定溢出隐藏和高度的转换checked选择器 使用复选框的特性：只有非选中和选中两种状态。再将label和input进行绑定。label的for和input的id进行绑定，可以实现点击label的时候input获取焦点。label和input可以不是紧挨的。<input type="ch
复制链接

扫一扫