'display'：'block'div出现在所有按钮（类）

Question

我正在尝试在单击按钮时使用jQuery将div的display属性设置为block，但由于我有多个按钮，div会出现在每个按钮上。

HTML：

<button class="btn btn-dropdown"><i class="fa fa-caret-down" aria-
hidden="true"></i></button>

<div class="dropdown-opt"></div>

jQuery的：

$('.btn-dropdown').on('click', function() {
  $('.dropdown-opt').css({'display': 'block'})
});
}

我想要的只是div出现在被点击的按钮上而不是所有按钮上。我认为'this'的概念会有所帮助，但我不确定如何实现它。

Answer 1

您应该只选择div next()

$('.btn-dropdown').on('click', function() {
   $(this).next('.dropdown-opt').css({'display': 'block'})
});
}

来自next（）的文档

  

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。