Question

我正在为手风琴的打开和关闭而苦恼。我的主要问题似乎是复选框。我需要获取复选框以触发网格行的高度。在我能找到的所有示例中，内容都是复选框/标签块的一部分。但是由于网格需要是第一级，我的内容是父级的单独潜水。不知何故，复选框：选中似乎不会触发我的高度：自动；价值。这是代码：

/* Collapse */

.collapse-content {
    grid-area: Content-Area;
    display: grid;
    grid-template-columns: 
    [full-start] minmax(40px, 1fr) 
    [main-start] minmax(160px, 800px) minmax(160px, 800px) [main-end]
    minmax(40px, 1fr) [full-end];
    grid-template-rows: min-content;
    grid-gap: 0px 0px;
    overflow-y: hidden;
}

.tab {
    grid-column: main;
    border-top: 0.8px solid #FFF;
    display: flex;
    font-family: 'Inter', sans-serif;
    text-align: left;
    font-weight: 300;
    font-size: 2rem;
    color: #fff;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    justify-content: space-between;
}

.tab:hover {
    background-color: rgba(255,255,255,0.1);
}

/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  cursor: pointer;
}

/*

/* (D) TAB CONTENT */
.tab-content {
grid-column: full;
  background: #fff;
  width:100%!important;
    overflow: hidden;
    height: 0;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */

/* (E) OPEN TAB ON CHECKED */

.tab input:checked #content1 {
    height: auto;
    color: #fff;
  opacity: 1;
}

<div class="collapse-content">
    <div class="tab">
            <input id="tab1" type="checkbox">
            <label for="tab1">Benefits</label>
            <i class="material-icons text-light">keyboard_arrow_right</i>
    </div>
    <div class="tab-content" id="content1">Content</div>

Answer 1

您可以使用 javascript 来选择元素并添加动画所需的 css 类。

js

// select the checkbox
const checkbox = document.querySelector('#tab1)

const displayContent = () => {
  // select the div content
  const content = document.querySelector('content1')
  
  // add the class that handles the show annimation
  content.classList.add('show-content')
}


// lisen when the checkbox is clicked
checkbox.addEventLisiner('click', displayContent)

并有一个 css 类

.show-content {
   height: auto;
   color: #fff;
   opacity: 1;
}

带有css网格的手风琴

1 个答案: