Javascript 切换而不使用 class 或 id

Question

我正在尝试使用 javascript 显示和隐藏段落。但由于这是一个学校项目，因此有一些规则。我不能使用 div class 或 id。这让我很难 select Javascript 中的标签。它必须是语义的，因此不允许使用复选框 hack 和 onclick 属性。

这是代码笔https://codepen.io/SummerD/pen/pWXWdy

这是我的html

<body>
<main>

  <section>

    <!-- Top part-->
    <span>
    <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
    </span>

    <!-- Bottom part-->
    <summary>
      <button>show paragraph</button>
      <h2>Moe</h2>
      <h3>leeg</h3>
      <p>blah blah blah, this is the paragraph  <a href="#">read more</a> </p>
      <footer>6 Minutes</footer>
    </summary>

  </section>

</main>
</body>

这是我的css

section {
    width: 15em;
    margin: 2em;
    background-color: white;
    height: 23em;
}

  /*i'm trying to show/hide this p on click of the button*/

section summary p {
  display:none;
}

我已经试过了：

var section = document.querySelector('section > summary > p');
var button = document.querySelector('section > summary > button');

var show = function () {
    section.classList.toggle('show')
}

button.addEventListener('click', show);

有了这个css

section summary p {
    color: black;
    font-size: 0.8em;
    line-height: 1.8em;
  display:none;
}
section summary p.show {
  display:block;
}

但遗憾的是这不起作用。我不知道它是否因为打字错误而不起作用，因为老实说我不知道我在做什么，我真的很不擅长 javascript。

希望你能帮帮我！

Answer 1

具有讽刺意味的是，问题不在于您的按钮无法切换（实际上它做得很好），而是您不能单击您的按钮因为 <section> 被 <main> 重叠。这是因为您在部分中有一个 z-index 的 -1 （未在问题的代码中显示），这意味着它位于 'behind' <main>，具有 0 的默认 z-index（技术上 auto，它继承了 <html> 的默认 0）。

只需删除它即可解决您的问题：

section {
  /* z-index: 1 */
}

我创建了一支新笔来展示这个 here，并将其添加到以下代码段中：

var section = document.querySelector('section > summary > p');
var button = document.querySelector('section > summary > button');

var show = function() {
  section.classList.toggle('show')
}

button.addEventListener('click', show);

* {
  box-sizing: border-box;
  font-family: Segoe UI, Myriad, Verdana, sans-serif;
}

body {
  background-color: grey;
}

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}


/*=================
  =====the card====
  =================*/

section {
  width: 15em;
  margin: 2em;
  box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.20);
  background-color: white;
  max-height: 23em;
}

/*top part*/

span {
  display: block;
  overflow: hidden;
  position: relative;
}

span img {
  width: 120%;
}

/*bottom part*/

section summary {
  bottom: 0;
  background: white;
  width: 100%;
  padding: 1em;
}

section summary h2 {
  margin: 0;
  padding-bottom: 0.5em;
  color: black;
  font-size: 1.5em;
  font-weight: 700;
}

section summary h3 {
  margin: 0;
  padding: 0 0 1em;
  color: darkred;
  font-size: 1em;
  font-weight: 400;
}

/*i'm trying to show/hide this p on click of the button*/

section summary p {
  color: black;
  font-size: 0.8em;
  line-height: 1.8em;
  display: none;
}

section summary p.show {
  display: block;
}

section summary footer {
  margin: 2em 0 0;
  color: black;
}

<body>
  <main>
    <section>
      <!-- Top part-->
      <span>
   <img src="https://www.w3schools.com/css/img_fjords.jpg"/> </span>
      <!-- Bottom part-->
      <summary>
        <button>show paragraph</button>
        <h2>Moe</h2>
        <h3>leeg</h3>
        <p>De buschauffeur port me wakker. We zijn bij de eindhalte, Centraal Station. Ik stap uit en duw de kinderwagen voort waarin mijn zoon ligt te slapen. Ik wou dat ik hem was. De mensen lopen in zichzelf gekeerd over het plein. De regen doet z’n best
          mij wakker te houden, maar mijn oogleden voelen zwaar, alsof er een stel verveelde kaboutertjes aan lopen te trekken. <a href="#">lees meer</a> </p>
        <footer>6 Minuten</footer>
      </summary>
    </section>
  </main>
</body>

希望这对您有所帮助！ :)

Javascript 切换而不使用 class 或 id

Javascript toggle without using class or id

html

javascript

css

css-selectors

semantics