国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

標(biāo)題重寫:下拉切換僅限于選擇第一個值
P粉511749537
P粉511749537 2024-02-26 10:09:52
0
1
505

我已經(jīng)制作了一個可以成功切換的下拉列表,但它似乎只選擇了第一個類,當(dāng)我單擊第二個下拉列表時,它會切換第一個下拉列表的內(nèi)容。我在這里缺少什么嗎?這是我的代碼:

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');
const menuBlock = document.querySelector('.menu-block');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function() {
    menuBlock.classList.toggle('menu-block-active');
  })
})
.menu-block {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  padding: 15px;
  border-radius: 8px;
  position: absolute;
  top: 35px;
  opacity: 0;
  transition: 150ms ease;
}

.menu-block-active {
  transition: 150ms all;
  opacity: 1;
}

.menu-block-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-block-list a {
  color: #444444;
  margin: 0 0 0.25 0;
  padding: 0;
  font-weight: 500;
}
<li class="menu-block-dropdown">
  <a href="#">Resources</a>
  <div class="menu-block">
    <div class="menu-block-list">
      <a href="#">Dropdown 1</a>
      <a href="#">Dropdown 2</a>
    </div>
  </div>
</li>
<li class="menu-block-dropdown">
  <a href="#">Blogs</a>
  <div class="menu-block">
    <div class="menu-block-list">
      <a href="#">Dropdown 3</a>
      <a href="#">Dropdown 4</a>
    </div>
  </div>
</li>

P粉511749537
P粉511749537

全部回復(fù)(1)
P粉141911244

問題是,您只選擇了一個下拉列表。因此,需要做的是選擇與您單擊的菜單鏈接相關(guān)的下拉列表。

請參閱下面我在 JS 中進行的更改

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');

// Not needed
// const menuBlock = document.querySelector('.menu-block');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function() {
    // Select the Block within the Target List
    const menuBlock = menuBlockList.querySelector(".menu-block");
    menuBlock.classList.toggle('menu-block-active');
  })
})
.menu-block {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  padding: 15px;
  border-radius: 8px;
  position: absolute;
  top: 35px;
  opacity: 0;
  transition: 150ms ease;
}

.menu-block-active {
  transition: 150ms all;
  opacity: 1;
}

.menu-block-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-block-list a {
  color: #444444;
  margin: 0 0 0.25 0;
  padding: 0;
  font-weight: 500;
}

li {
  display: inline-block;
}



最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板