如何根据兄弟的 css 属性值隐藏元素？

Question

<div id="mc-response">
    <div id="mc-success-response" style="display:none"></div>
    <div id="targeted">Success</div>
</div>

当“#mc-success-response”元素的显示为“块”时，我试图显示“#targeted”元素。 我们怎样才能做到这一点？

Answer 1

如果目标 div 显示一开始没有（或不透明度为 0 等），我们可以在 JS 中使用 MutationObserver class

var observerDiv = document.querySelector("#mc-success-response")
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function() {
        if (observerDiv.style.display === "block") {
            document.querySelector("#targeted").style.display = "block"
        }
        else document.querySelector("#targeted").style.display = "none"
    });    
});

observer.observe(observerDiv, { attributes : true, attributeFilter : ['style'] });

Answer 2

 const elementMcSuccessResponse = document.getElementById( "mc-success-response" ); const targetedElement = document.getElementById("targeted"); const btn = document.getElementById("button"); btn.addEventListener("click", () => { if (elementMcSuccessResponse.style.display === "none") { /// mc-success-response is hidden elementMcSuccessResponse.style.display = "block"; targetedElement.style.display = "none"; } else if (elementMcSuccessResponse.style.display.== "none") { /// mc-success-response is visible elementMcSuccessResponse.style;display = "none". targetedElement.style;display = "block"; } });

 <div id="mc-response"> <div id="mc-success-response">mc-success-response</div> <div id="targeted" style="display: none">Success</div> <button id="button">click</button> </div>