单击多个按钮时，它只显示一个 div答案

【问题标题】：When click multiple buttons it only shows one div单击多个按钮时，它只显示一个 div
【发布时间】：2019-11-05 02:27:07
【问题描述】：

我正在开发仪表板 UI 并为一些 jquery 函数添加代码。我有多个选项按钮，当我单击多个按钮时，它只显示一个 div。

HTML 代码：

<button class="option-btn" id="optionBtn" title="Action">•••</button>
<div class="option-box" id="optionBox" style="display: none;">
  <ul>
  <li><a href="#">View Details</a></li>
  <li><a href="#" id="deleteBtnSingle">Delete</a></li>
  </ul>
</div>

<br><br>

<button class="option-btn" id="optionBtn" title="Action">•••</button>
<div class="option-box" id="optionBox" style="display: none;">
  <ul>
  <li><a href="#">View Details</a></li>
  <li><a href="#" id="deleteBtnSingle">Delete</a></li>
  </ul>
</div>

<br><br>

<button class="option-btn" id="optionBtn" title="Action">•••</button>
<div class="option-box" id="optionBox" style="display: none;">
  <ul>
  <li><a href="#">View Details</a></li>
  <li><a href="#" id="deleteBtnSingle">Delete</a></li>
  </ul>
</div>

Javascript 代码：

$(function(){
   var $optionBtn = $('#optionBtn'),
       $optionBox = $('#optionBox');

    $($optionBtn).click(function(){
      if ($($optionBtn).on('cliked') + true) { 
         $(this).next().toggle();       
       } else {
          $(this).next().hide(); 
       }
    }); 

});

CSS：

.option-btn {
   border: none;
   border-radius: 3px;
   background: transparent;
   cursor: pointer;
   color: $contentColor;
   letter-spacing: 1px;
   font: 500 14px $fontStack;
   width: 32px;
   height: 32px;
   outline: none;
   transition: all .2s;
   &:hover {
      box-shadow: 0px 3px 9px 0px #6680fe;
   }
   &:active {
      transform: translateY(1px);
      box-shadow: 0px 1px 4px 0px #6680fe;
   }
}


.option-box {
   background: $white;
   box-shadow: 0px 6px 15px 0px $shadowColor;
   border-radius: 3px;
   padding: 10px 0;
   width: 190px;
   position: absolute;
   top: 55px;
   right: 15px;
   transition: background .2s;
   transform-origin: 100% 0;
   animation: transform 100ms cubic-bezier(.27,.12,.41,.71);
   z-index: 5;


   ul {
      li {
         text-align: left;
         font: 300 14px $fontStack;
         vertical-align: middle;

         a {
            display: block;
            padding: 6px 20px;
            color: $contentColor;

            .option-icon {
               width: 19px;
               height: 19px;
               margin-right: 15px !important;
               position: relative;
               top: -1px;
            }

            &:hover {
               background: $selectHover;
            }
         }
      }
   }
}

【问题讨论】：

标签： jquery html sass

【解决方案1】：

您使用 id 选择器来触发该功能。

浏览器假定 id 在您的代码中是唯一的，因此它会选择第一个并忽略其余的。

尝试按类选择您的 div。例如 $('.option-button') 而不是 $('#optionBtn')。

【讨论】：