javascript - 如何覆盖具有类样式定义的元素的样式

Question

我正在尝试使用一个类来更改该类所有元素的显示样式。然后覆盖具有该类的单个元素的显示样式。

目标是允许用户显示元素。该脚本应隐藏所有其他元素，然后显示所需的元素。

我可以一次覆盖显示样式。但是，我不能做第二次。尽管我的 DOM 检查器说该元素具有 display: inline-block，并且该元素已正确显示，但我的函数认为 display 仍设置为 none。我使用警报来报告显示状态。

我正在使用 window.getComputedStyle 来引用计算样式而不是样式表声明。

我正在使用 jquery-1.12.1 。

function showhide(sent) {

  /* Hide all elements with class classy. */

  $(".classy").css({
    display: "none"
  });

  /* Grab target elemenet to show or hide. */

  var target_element = document.getElementById(sent);

  /* Get display style of target element. */

  true_value = window.getComputedStyle(target_element).getPropertyValue("display");

  /* Alert display state. */

  alert(true_value);

  /* If display state of traget element is none, change it to inline block. */

  if (true_value == "none") {
    target_element.style.display = "inline-block";
  }

  /* If display state of target element is inline-block change it to none. */

  if (true_value == "inline-block") {
    target_element.style.display = "none";
  }

  /* End of function. */
}

.classy {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="click_thing" onclick="showhide('first_section')">
  Click This Please
</section>

<section id="first_section" class="classy">
  Some stuff here.
</section>

Answer 1

因为你已经在使用 jQuery 可以简单地做:

function showhide(sent) {
  var $tgt = $('#' + sent).toggle()// toggles hide/show
  $(".classy").not($tgt).hide();// hide all but target
}

.classy {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="click_thing" onclick="showhide('first_section')">
 Toggle section 1
</section>
<section  onclick="showhide('second_section')">
 Toggle section 2
</section>

<section id="first_section" class="classy">
  section one
</section>


<section id="second_section" class="classy">
  section two
</section>