При нажатии нескольких кнопок отображается только один элемент

Question

Я работаю над интерфейсом Dashboard и добавляю код для некоторой функции 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;
            }
         }
      }
   }
}

Answer 1

Просто измените : -

var $optionBtn = $("#optionBtn")

до

var $optionBtn = $(".option-btn")

И

var $optionBox = $("#optionBox")

до

var $optionBox = $(".option-box")

Answer 2

Вы использовали селектор идентификатора для запуска функции.

Браузер предполагает, что id уникален в вашем коде, поэтому он выбирает первый и игнорирует остальные.

попробуйте выбрать ваши деления по классам.Например, $ ('. Option-button') вместо $ ('# optionBtn').