如何专注于div和昏暗的背景

Question

我正在进行自定义下拉列表，由于select元素的限制，该下拉列表不一定是select元素。

div应该有一个下拉列表，一旦显示下拉列表，它应该聚焦在那里并使背景变暗。它不是模态，因为下拉列表应该保持在另一个div之下。

为了更好地理解，请在此处查看所需的输出：

希望你能帮我解决这个问题。

Answer 1

点击该下拉列表会改变其他元素的不透明度。

类似的东西：

$('.drop-down').click(function(){
    $('.other-background-div').css('opacity', '0.5');
});

或者您也可以在其他元素的顶部添加带有z-index的div，但在下拉列表下方，并根据点击显示隐藏。

$('.drop-down').click(function(){
    $('.new-added-div-with-color-gray').toggle();
});

使用适合您的解决方案。