Bootstrap 下拉按钮不起作用并非所有项目都起作用只有一个项目接受javascript事件

iqjalb3h 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(182)

https://codepen.io/MohamedSamehAhmed/pen/NWMVaEb在这个页面上，我有三个按钮来打开下拉菜单，问题是只有第一个按钮可以用，其余的都不能用HTML代码：

<nav class="nav-bar">
       <div class="logo">
           <a href="#">Logo</a>
       </div>
       <ul class="nav-links">
           <li><a href="#">Home</a></li>
           <li>
               <a class="drop-menu-btn" href="#">Product <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
               <ul class="drop-menu">
                   <li class="drop-menu-link"><a href="#">link</a></li>
                   <li class="drop-menu-link"><a href="#">link</a></li>
                   <li class="drop-menu-link"><a href="#">link</a></li>
               </ul>
           </li>
           <li><a href="#">News</a></li>
           <li><a href="#">Tips</a></li>
           <li>
               <a class="drop-menu-btn" href="#">About Us <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
               <ul class="drop-menu">
                   <li class="drop-menu-link"><a href="#">link</a></li>
                   <li class="drop-menu-link"><a href="#">link</a></li>
                   <li class="drop-menu-link"><a href="#">link</a></li>
               </ul>
           </li>
           <li>
               <a class="drop-menu-btn" href="#">Gallery <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
               <ul class="drop-menu">
                   <li class="drop-menu-link"><a href="#">link</a></li>
                   <li class="drop-menu-link"><a href="#">link</a></li>
                   <li class="drop-menu-link"><a href="#">link</a></li>
               </ul>
           </li>
           <li><a href="#">Contact Us</a></li>
       </ul>
   </nav>

CSS代码：

:root {
   --greenColor:#409a4d;
   --whiteColor: #ffffff;
   --blackColor:#212121;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   font-family: "Open Sans";
}
a {
   text-decoration: none;
}

ul {
   list-style: none;
}

/* nav bar */
.nav-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   background-color: #ffffff;
   -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   padding: 14px 20px;
}
.nav-bar .logo a {
   color: var(--greenColor);
   font-weight: 500;
   font-size: 25px;
}
.nav-bar .nav-links {
   display: flex;
   align-items: center;
   gap: 50px;
}
.nav-bar .nav-links li a {
   font-size: 18px;
   font-weight: 400;
   color: var(--blackColor);
   transition:all 3s ease;
   -webkit-transition:all 3s ease;
   -moz-transition:all 3s ease;
   -ms-transition:all 3s ease;
   -o-transition:all 3s ease;
   position: relative;
}
.nav-bar .nav-links li {
   position: relative;
   display: block;
}
.nav-bar .nav-links li .drop-menu {
   display: none;
   position: absolute;
   top: 43px;
   text-align: center;
   filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   background-color: #ffffff;
   -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   animation: drop .3s;
   -webkit-animation: drop .3s;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

.nav-bar .nav-links li .drop-menu.active {
   display: block;
   width: 100%;
   height: 180px;
}
.nav-bar .nav-links li .drop-menu-btn i.rotated {
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
}
.nav-bar .nav-links li .drop-menu >li {
   margin-bottom: 12px;
}

**JS代码：**在页面上，我有三个按钮可以打开下拉菜单，问题是只有第一个可以打开，其他的都不能打开

const dropMenuBtn = document.querySelector('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.addEventListener('click', () => {
    dropMenu.classList.toggle('active')
    icon.classList.toggle('rotated')
});

console.log(dropMenuBtn)

twitter-bootstrap

来源：https://stackoverflow.com/questions/74117937/the-dropdown-button-is-not-working-not-everyone-is-working-only-one-item-accepts

2条答案

按热度按时间

trnvg8h31#

正如Richard所提到的，如果您使用JQuery，这会变得更容易，因为您可以使用如下代码：

const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
$(dropMenuBtn).click(function(){
  $(this).closest("li").find(".drop-menu").toggleClass("active");
});

如果您想坚持使用纯JavaScript，可以使用以下代码：

const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.forEach(item => {
  item.addEventListener('click', event => {
    var thisDD = event.target.closest("li").querySelector('.drop-menu');
    if (thisDD.classList.contains("active")) {
      thisDD.classList.remove("active");
    }
    else {
      thisDD.classList.add("active");
    }
  });
});

赞(0）回复(0）举报 2022-12-07

4si2a6ki2#

欢迎光临！
既然您已经标记了jQuery，下面是一个可能的解决方案：

$('.drop-menu-btn').each((i, btn) => {
    $(btn).on('click', () => {
        $(btn).next('.drop-menu').toggle();
    });
});

在codepen上试用

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 下拉按钮不起作用并非所有项目都起作用只有一个项目接受javascript事件

2条答案

相关问题

热门标签

最新问答