改变CSS的Javascript

Question

我将如何着手创建一个脚本来检查是否将 div 设置为 display:none 以外的任何其他值。

我在 Accordion 上有一个图像，但是当我点击一个 Accordion 元素时，我想将图像隐藏在顶部。

所以说我的内容是一个名为“accord_content”的类的形式，我显示的图像是“image_over”。我可以创建一个脚本来检查是否显示了 accord_content，如果显示了则隐藏“image_over”？

if ('.accord_content.display !== 'none') {
        image_over.display = 'none')
        }

只是快速尝试，不擅长 javascript，所以对如何完成这个感到困惑

谢谢

新更新 - 这是我要检查显示的 html 的摘录

<h3 class="title">Making the shortlist</h3>
        <div class="accord_content">
        <div class="content_left">

<p>CONTENT</p>

<p>CONTENT>
    </div>

现在这是使用 jquery accordion ui，所以当页面打开时，类 accord_content 是 display:none,

当点击 h3 时，它会变为 display:block。

谢谢

Answer 1

使用 jQuery，您可以执行以下操作:

Javascript

if ($('.accord_content').css('display') !== 'none') {
    $('.image_over').hide();
}

Demo

这将按以下方式工作。如果任何 .accord_content 可见，则所有 .image_over 都被隐藏。

或者在原生 javascript 中你可以这样做:

Javascript

if (document.querySelector('.accord_content').style.display !== 'none') {
    document.querySelector('.image_over').style.display = 'none';
}

Demo

这将获取 .accord_content 的第一个实例并隐藏第一个 .image_over。只有当 display: none 被设置为 .accord_content 作为内联 style 属性而不是 css 时，此检查才会返回 false。

你真的应该在你的问题中发布一些相关的 html。还描述了这是如何工作的。如果您发布一个模糊的问题，您将得到一个模糊的答案。花时间发布一个好的问题，人们也会花时间发布一个好的答案。