在 CSS 中，我有一个带有 display:none 属性的 block 。有一个按钮元素将此属性更改为 block。然后我按下 block 中的按钮元素，它显示了，但它没有显示。
我试图在标有注释 //hiding 的代码行中更改其他 CSS 属性，但它也不起作用。
CSS
.optionPanel{
width: 20rem;
height: 10rem;
overflow: auto;
background: whitesmoke;
display: none;
}
JS
$(document).ready(()=>{
selectsFiling();
$('.divOption').click(function (e){
let _select = $(this).parent().parent().parent().children().get(0);
let _label = $(this).parent().parent();
let _span = _label.children().get(1);
$(_select).val(this.textContent);
let k = $('.optionPanel');
k.css('display', 'none'); //hiding
_span.textContent = this.textContent;
});
$('.fluentSelect label').click(function (e){
let _labelPanel = $(this).children(':first');
_labelPanel.css('display', 'block'); //showing
});
});
HTML
<body>
<div class="fluentSelect">
<select name="r-select" id="r-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>
<div class="optionPanel">
</div>
<span></span>
</label>
</div>
</body>
最佳答案
尝试添加实时点击。由于按钮是在运行时添加的，因此不会将点击监听器添加到按钮。
将代码改成这样——
$(".divOption").live("click", function(){ ... })
在此处查看文档:https://www.w3schools.com/jquery/event_live.asp
如果代码仍然无法正常工作，请首先检查 console.log("click")
作为代码
let _select = $(this).parent().parent().parent().children().get(0);
let _label = $(this).parent().parent();
let _span = _label.children().get(1);
$(_select).val(this.textContent);
看起来真的很冒险。元素选择可能存在一些错误或问题。虽然希望 live() 有效 :) !!
关于javascript - 无法使用 jquery 更改 css 样式属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57633281/