Question

我正在使用Dashboard UI，并为某些jquery函数添加代码。我有多个选项按钮，当我单击多个按钮时，它仅显示一个格。

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

您使用ID选择器触发了该功能。

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

尝试按类别选择div。例如，以$（'。option-button'）代替$（'＃optionBtn'）。

Answer 2

只需更改 ：-

var $optionBtn = $("#optionBtn")

到

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

和

var $optionBox = $("#optionBox")

到

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

单击多个按钮时，仅显示一个格

2 个答案: