'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 下一个()它

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

来自下一个()的文档

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