问题描述
我正在创建一个项目,我们可以在其中查看作业并下载大学提供的作业。
为此我使用了手风琴方法.... 其中有 5-6 个主题,当您单击该主题时,它会展开并显示作业,从该展开的视图中,您可以下载文档或查看它.....
我还在它周围添加了一些按钮,例如该作业的“下载”“查看”“标记为最喜欢的”。
我已经使用了扩展手风琴的复选框,现在的主要问题是当我单击该主题“div”上的任意位置时,它会扩展,但我希望它仅在用户单击“加号”时扩展" 图标(显示在右侧)
这样“查看文档”、“下载文档”、“标记为收藏”等所有操作都适用于添加在右侧的按钮...
我只是希望当有人点击“+”图标时它应该展开(而不是当有人点击整个 div 时)
Check the whole code at Codepen
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
Box-sizing: border-Box;
font-family: 'Poppins',sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
::selection{
background: rgb(0,123,255,0.3);
}
.wrapper{
max-width: 600px;
padding: 0 20px;
}
.wrapper .parent-tab,.wrapper .child-tab{
margin-bottom: 8px;
border-radius: 3px;
Box-shadow: 0px 0px 15px rgba(0,0.18);
}
.wrapper .parent-tab label,.wrapper .child-tab label{
background: #007bff;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: 3px;
position: relative;
z-index: 99;
transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover{
background: #006fe6;
}
.parent-tab input:checked ~ label,.child-tab input:checked ~ label{
border-radius: 3px 3px 0 0;
background: #006fe6;
}
.wrapper label span{
color: #fff;
font-size: 18px;
font-weight: 500;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span{
font-size: 17px;
}
.parent-tab label .icon{
position: relative;
height: 30px;
width: 30px;
font-size: 15px;
color: #007bff;
display: block;
background: #fff;
border-radius: 50%;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon{
height: 27px;
width: 27px;
}
.parent-tab label .icon i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.parent-tab input:checked ~ label .icon i:before,.child-tab input:checked ~ label .icon i:before{
content: '\f068';
}
.wrapper .parent-tab .content,.wrapper .child-tab .sub-content{
max-height: 0px;
overflow: hidden;
background: #fff;
border-radius: 0 0 3px 3px;
transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,.child-tab input:checked ~ .sub-content{
max-height: 100vh;
}
.tab-3 input:checked ~ .content{
padding: 15px 20px;
}
.parent-tab .content p,.child-tab .sub-content p{
padding: 15px 20px;
font-size: 16px;
}
.child-tab .sub-content p{
font-size: 15px;
}
input[type="radio"],input[type="checkBox"]{
display: none;
}
.num1{
text-align: center;
margin-bottom: 20px;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="wrapper">
<h2 class="num1">Assignment At Glance</h2>
<!-- Accordion heading One -->
<div class="parent-tab">
<input type="checkBox" name="tab" id="tab-1" checked>
<label for="tab-1">
<span>Engineering Physics</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing thelit. Quam,repellendus facere,id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur,repellat obcaecati!</p>
</div>
</div>
<!-- Accordion heading Two -->
<div class="parent-tab">
<input type="checkBox" name="tab" id="tab-2">
<label for="tab-2">
<span>Engineering Graphics</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet,repellat obcaecati!</p>
</div>
</div>
<!-- Accordion heading Three -->
<div class="parent-tab tab-3">
<input type="checkBox" name="tab" id="tab-3">
<label for="tab-3" class="tab-3">
<span>PPS</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
• Assignment Completed : 3 <br>
• Assignment Remaining : 1 <br>
<br>
<!-- Sub heading One -->
<div class="child-tab">
<input type="checkBox" name="sub-tab" id="tab-4">
<label for="tab-4">
<span>Algorithms</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing thelit dolor. Utfacilis labore,exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
<!-- Sub heading Two -->
<div class="child-tab">
<input type="checkBox" name="sub-tab" id="tab-5">
<label for="tab-5">
<span>Python</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet,exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
</div>
</div>
<!-- Accordion heading Four -->
<div class="parent-tab">
<input type="checkBox" name="tab" id="tab-6">
<label for="tab-6">
<span>Accordion heading Four</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet,repellat obcaecati!</p>
</div>
</div>
</div>
解决方法
问题
制作蓝条时,它们被包裹在标签中。当您单击标签时,它会展开框,因为它选中了复选框。
解决方案
您需要做的就是让蓝条不记录点击次数,但图标会记录点击次数。为此,您可以使用 pointer-evens
属性。代码应该是这样的
.parent-tab label{
pointer-events: none;
}
.parent-tab .icon{
pointer-events: auto;
}
免责声明: 我没有想出这个答案,@ManirajMurugan 想出了这个答案。 (见问题的第一条评论)。