Question

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

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

我可以覆盖一次显示样式。但是，我不能第二次这样做。虽然我的DOM检查器说元素有显示：inline-block，并且元素正确显示，但我的函数认为显示仍然设置为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

看看你的逻辑。

如果是none，则将其设为inline-block。

然后你独立测试它是inline-block（如果它是none那么它现在就是！）并将其设置为none。< / p>

你需要else。

Answer 2

由于您已经在使用jQuery，因此可以执行以下操作：

＆＃13;

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

＆＃13;

.classy {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: