我正在尝试使用 javascript 显示和隐藏段落。但由于这是一个学校元素，因此有一些规则。我不能使用 div 类或 id。这让我很难在 Javascript 中选择标签。它必须是语义的，因此不允许使用复选框 hack 和 onclick 属性。
这里是codepen 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。
我希望你能帮助我!
最佳答案
具有讽刺意味的是，问题不在于您的按钮无法切换(实际上它做得很好)，而是您不能点击您的按钮，因为<section>被 <main> 重叠.这是因为你有一个 z-index 的 -1在部分(未在问题的代码中显示)，这意味着它位于“后面” <main> , 默认为 z-index的 0 (技术上 auto ，它继承了默认的 0 for <html>)。
只需删除它即可解决您的问题:
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>希望对您有所帮助! :)
关于不使用 class 或 id 的 Javascript 切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46921427/