1

我正在使用 CSS 来隐藏表单元素：

#main_form #form-field-email, #form-field-realtor_select { display: none;}
#main_form .elementor-select-wrapper::before { display: none; }

然后用 JavaScript 向它们展示：

document.getElementById("form-field-first_name").onclick = function(){
document.getElementById('form-field-email').style.display = 'block';
document.getElementById('form-field-realtor_select').style.display = 'block';

.elementor-select-wrapper::before问题在于隐藏选择元素中的向下箭头所需的伪元素。我需要使用 JavaScript onclick 事件来显示箭头。我试过document.getElementsByClassName()了，但没有奏效。

您可以在此处查看测试页：测试页。单击名字或姓氏以显示字段（比上面列出的更多），您会看到向下箭头是来自选择元素的任务。

4

1 回答 1

0

因此，不可能直接选择伪元素，但您可以创建一组如下所示的 CSS 样式，这将::before使用父级上的“toggleable”类更改元素：

#main_form .elementor-select-wrapper::before {
    display: none;
}

#main_form .elementor-select-wrapper.show-chevron::before {
    display: block;
}

当您将.show-chevron类添加（或删除）到 时.elementor-select-wrapper，它应该切换::before元素。

document.getElementsByClassName('elementor-select-wrapper')[0].classList.add('show-chevron')

让我知道这个是否奏效！如果没有，我可以再看看

于 2022-02-13T02:22:55.830 回答