按钮下拉功能 - HTML/CSS

问题描述 投票：0回答：2

我有以下代码：

document.querySelector('.rectangle')
  .addEventListener('click', function() {
    this.classList.toggle('expanded');
    const plus = this.querySelector('.plus');
    plus.style.transform = this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)';
  });
.tile-container {
  padding: 5px;
  font-size: 25px;
}

.rectangle {
  background-color: #0051a5;
  padding-right: 1em;
  padding-top: 1em;
  cursor: pointer;
  border-radius: 1em;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: auto 1em;
  grid-template-areas: "sample plus" "extratext extratext";
}

.plus {
  grid-area: plus;
  background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff;
  background-position: center;
  background-size: 60% 2.5px, 2.5px 60%;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.radius {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  margin-right: 1em;
}

.tile-label {
  grid-area: sample;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  padding-left: 1em;
  height: 2em;
}

.tile-accent {
  color: #FFC72C;
}

.hidden-text {
  grid-area: extratext;
  display: none;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 0.75em;
  background-color: #fff;
  color: #000;
  margin: 1em;
  padding-top: 0.5em;
  padding-left: 1em;
}

.expanded>.hidden-text {
  display: block;
   animation: fade-in 1s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="tile-container">
    <div class="rectangle">
      <div class="plus radius"></div>
      <div class="tile-label">
        Sample <span class="tile-accent">Text</span>
      </div>
      <div class="hidden-text">
        <ul>
          <li>Not Dropdown Text</li>
          <li>Dropdown Text</li>
          <li>Not Dropdown Text</li>
        </ul>
      </div>
    </div>
  </div>
</body>

在此代码中，“Not Dropdown Text”表示任何不具有下拉功能的文本；然而，“下拉文本”是指可以进一步展开以显示隐藏文本的文本。

如何实现这个下拉框中的下拉菜单？当我单击具有进一步下拉功能的文本时，它应该在框中显示隐藏的文本。

javascript html css reactjs responsive-design
2个回答
0
投票

要在下拉框中获取下拉菜单，请执行以下高级步骤：

  1. HTML 结构：在 
    .hidden-text
    div 内添加嵌套下拉结构。
  2. CSS 样式：将嵌套下拉菜单设置为默认隐藏并在单击时显示。
  3. JavaScript 逻辑：向嵌套下拉列表添加事件侦听器以切换其可见性。
0
投票

一种解决方案是在列表中添加一个包含更多数据的列表。

我还将面板本身的点击处理程序更改为标题。这样您就可以单击正文中的元素来打开/关闭。

document.querySelector('.tile-label')
  .addEventListener('click', function() {
    const _parent = this.parentNode;
    _parent.classList.toggle('expanded');
    const plus = _parent.querySelector('.plus');
    plus.style.transform = _parent.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)';
  });
  
  const toggleChild = (e) => {
    const el = e.target.querySelector("ul");
    el.classList.toggle("active")
  }
  
  const level2 = document.querySelectorAll(".hidden-text ul li:has(ul)");
  
  level2.forEach((li) => li.addEventListener("click",toggleChild))
.tile-container {
  padding: 5px;
  font-size: 25px;
}

.rectangle {
  background-color: #0051a5;
  padding-right: 1em;
  padding-top: 1em;
  border-radius: 1em;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: auto 1em;
  grid-template-areas: "sample plus" "extratext extratext";
}

.plus {
  grid-area: plus;
  background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff;
  background-position: center;
  background-size: 60% 2.5px, 2.5px 60%;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.radius {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  margin-right: 1em;
}

.tile-label {
  grid-area: sample;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  padding-left: 1em;
  height: 2em;
}

.tile-accent {
  color: #FFC72C;
}

.hidden-text {
  grid-area: extratext;
  display: none;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 0.75em;
  background-color: #fff;
  color: #000;
  margin: 1em;
  padding-top: 0.5em;
  padding-left: 1em;
}


.expanded>.hidden-text {
   display: block;
   animation: fade-in 1s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.hidden-text ul li ul{
  display:none;
}

.hidden-text ul li ul.active{
  display:block;
}

.hidden-text ul li:has(ul){
  cursor:pointer;
}
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="tile-container">
    <div class="rectangle">
      <div class="plus radius"></div>
      <div class="tile-label">
        Sample <span class="tile-accent">Text</span>
      </div>
      <div class="hidden-text">
        <ul>
          <li>Not Dropdown Text</li>
          <li>Dropdown Text
            <ul>
              <li>More Text!!</li>
            </ul>
          </li>
          <li>Not Dropdown Text</li>
        </ul>
      </div>
    </div>
  </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.