当最大高度 属性 动态变化时,最大高度过渡不起作用
Max height transition is not working when the max-height property change dynamically
document.querySelectorAll('.sidebarCategory').forEach(el =>{
el.addEventListener('click', e =>{
let sub = el.nextElementSibling
if(sub.style.maxHeight){
el.classList.remove('opened')
sub.style.maxHeight=null
}
else{
document.querySelectorAll('.sidebarSubcategories').forEach(element => {
element.style.maxHeight=null
element.previousElementSibling.classList.remove('opened')
})
el.classList.add('opened')
sub.style.maxHeight = sub.scrollHeight + "px";
}
})
})
document.querySelectorAll('.sidebarSubcategories > div:not(.sidebarSubSubcategories)').forEach(el =>{
el.addEventListener('click', e =>{
let sub = el.nextElementSibling
if(sub!=null && sub.classList.contains('sidebarSubSubcategories'))
{
if(sub.style.maxHeight){
sub.style.maxHeight=null
sub.style.marginBottom=0
sub.style.padding='0 30px'
}
else{
sub.style.marginBottom='15px'
sub.style.padding='15px 30px'
sub.style.maxHeight = sub.scrollHeight + 30 + "px"
el.parentNode.style.maxHeight=el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight + 30 + "px"
}
}
})
})
.main{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
overflow-y: auto;
background-color: aquamarine;
}
.sidebarCategory{
color: white;
position: relative;
height: 60px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 20px;
flex-wrap: wrap;
font-weight: 600;
fill: white!important;
cursor: pointer;
padding-left: 15px;
transition: 0.4s;
}
.sidebarCategory.opened{
background-color: rgba(3, 63, 109, 0.588);
}
.sidebarSubcategories{
max-width: 100%;
position: relative;
background-color: rgba(3, 63, 109, 0.588);
max-height: 0;
transition: 0.4s;
overflow-y: hidden;
}
.sidebarSubcategories > div:not(.sidebarSubSubcategories){
max-height: 45px;
/* height: 45px; */
position: relative;
min-height: 45px;
color: white;
cursor: pointer;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0 30px;
border-bottom: 1px solid var(--blue);
}
.sidebarSubSubcategories{
max-height: 0;
overflow-y: hidden;
transition: 0.4s;
background-color: white;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 15px;
}
.sidebarSubSubcategories > div{
cursor: pointer;
transition: 0.2s;
display: flex;
justify-content: center;
border-radius: 5px;
align-items: center;
padding: 10px;
width: 49%;
}
.sidebarSubSubcategories > div:hover{
background-color: #f3f3f3;
}
<body>
<div class="main">
<div class="sidebarCategory">
Lorem ipsum dolor sit amet.
</div>
<div class="sidebarSubcategories">
<div>
Subcategory
</div>
<div class="sidebarSubSubcategories">
<div>Sub Subcategory</div>
<div>Sub Subcategory</div>
<div>Sub Subcategory</div>
<div>Sub Subcategory</div>
</div>
<div>
Subcategory
</div>
<div>
Subcategory
</div>
<div>
Subcategory
</div>
</div>
</div>
</body>
查看代码,如果我与第二个下拉菜单交互,第一个下拉菜单不会顺利关闭。
我正在更改最大高度 属性 以创建手风琴。我在手风琴里面放了另一个手风琴。但是当我与内部手风琴交互时,外部手风琴的过渡不起作用。
我认为问题在于 sidebarSubcategories
元素没有定义高度。它的 max-heigth
为 0
,然后通过 JavaScript.
设置为 null
height
的默认值为auto
,因此,当您将maxHeight
设置为空时,您将max-height
设置为auto
,并且转换不适用于 auto
值。
那是因为浏览器不知道要转换到哪个值。
如果你真的需要这个并且你不能先验地设置每个sidebarSubcategories
'height
,你需要存储每个sidebarSubcategories
的innerHeight
(当它展开时)并在再次展开时应用它。
看起来问题出在这一行
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight...."
您添加的字符串和数字将始终连接,因此“123”+ 4 = 字符串“1234”。您需要解析为一个 int(您也不需要切掉 px)
//Instead of
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2)
//Do this
parseInt(el.parentNode.style.maxHeight)
document.querySelectorAll('.sidebarCategory').forEach(el =>{
el.addEventListener('click', e =>{
let sub = el.nextElementSibling
if(sub.style.maxHeight){
el.classList.remove('opened')
sub.style.maxHeight=null
}
else{
document.querySelectorAll('.sidebarSubcategories').forEach(element => {
element.style.maxHeight=null
element.previousElementSibling.classList.remove('opened')
})
el.classList.add('opened')
sub.style.maxHeight = sub.scrollHeight + "px";
}
})
})
document.querySelectorAll('.sidebarSubcategories > div:not(.sidebarSubSubcategories)').forEach(el =>{
el.addEventListener('click', e =>{
let sub = el.nextElementSibling
if(sub!=null && sub.classList.contains('sidebarSubSubcategories'))
{
if(sub.style.maxHeight){
sub.style.maxHeight=null
sub.style.marginBottom=0
sub.style.padding='0 30px'
}
else{
sub.style.marginBottom='15px'
sub.style.padding='15px 30px'
sub.style.maxHeight = sub.scrollHeight + 30 + "px"
el.parentNode.style.maxHeight=el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight + 30 + "px"
}
}
})
})
.main{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
overflow-y: auto;
background-color: aquamarine;
}
.sidebarCategory{
color: white;
position: relative;
height: 60px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 20px;
flex-wrap: wrap;
font-weight: 600;
fill: white!important;
cursor: pointer;
padding-left: 15px;
transition: 0.4s;
}
.sidebarCategory.opened{
background-color: rgba(3, 63, 109, 0.588);
}
.sidebarSubcategories{
max-width: 100%;
position: relative;
background-color: rgba(3, 63, 109, 0.588);
max-height: 0;
transition: 0.4s;
overflow-y: hidden;
}
.sidebarSubcategories > div:not(.sidebarSubSubcategories){
max-height: 45px;
/* height: 45px; */
position: relative;
min-height: 45px;
color: white;
cursor: pointer;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0 30px;
border-bottom: 1px solid var(--blue);
}
.sidebarSubSubcategories{
max-height: 0;
overflow-y: hidden;
transition: 0.4s;
background-color: white;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 15px;
}
.sidebarSubSubcategories > div{
cursor: pointer;
transition: 0.2s;
display: flex;
justify-content: center;
border-radius: 5px;
align-items: center;
padding: 10px;
width: 49%;
}
.sidebarSubSubcategories > div:hover{
background-color: #f3f3f3;
}
<body>
<div class="main">
<div class="sidebarCategory">
Lorem ipsum dolor sit amet.
</div>
<div class="sidebarSubcategories">
<div>
Subcategory
</div>
<div class="sidebarSubSubcategories">
<div>Sub Subcategory</div>
<div>Sub Subcategory</div>
<div>Sub Subcategory</div>
<div>Sub Subcategory</div>
</div>
<div>
Subcategory
</div>
<div>
Subcategory
</div>
<div>
Subcategory
</div>
</div>
</div>
</body>
我认为问题在于 sidebarSubcategories
元素没有定义高度。它的 max-heigth
为 0
,然后通过 JavaScript.
null
height
的默认值为auto
,因此,当您将maxHeight
设置为空时,您将max-height
设置为auto
,并且转换不适用于 auto
值。
那是因为浏览器不知道要转换到哪个值。
如果你真的需要这个并且你不能先验地设置每个sidebarSubcategories
'height
,你需要存储每个sidebarSubcategories
的innerHeight
(当它展开时)并在再次展开时应用它。
看起来问题出在这一行
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight...."
您添加的字符串和数字将始终连接,因此“123”+ 4 = 字符串“1234”。您需要解析为一个 int(您也不需要切掉 px)
//Instead of
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2)
//Do this
parseInt(el.parentNode.style.maxHeight)