Question

我在CodePen中创建了一个我想要添加到我的网站中的工作概念。但是，当我将代码放入我的网站时，它无法正常运行。我在这里找不到翻译中丢失的东西。任何帮助将不胜感激。

我希望它如何运作
http://codepen.io/Mdade89/pen/JKkYGq

目前的工作方式
https://premierdisability.com/faq-new/

.question {
  vertical-align: top;
  height: auto !important;
  font-family: Helvetica,sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin: 20px;
  padding: 20px;
  background-color: pink;
  width: 280px;
  border-radius: 10px;
}

.answer {
  display:none;
  font-family: Helvetica,sans-serif;
  font-size: 14px;
  font-weight: normal;
}

.show {
  display: none;
    text-decoration: none;
}

.hide:target + .show {
  display: inline;
  text-decoration: none;
}

.hide:target {
  display: none;
  text-decoration: none;
}

.hide:target ~ .answer {
  display:inline;
  text-decoration: none;

}

@media print {
  .hide, .show {
    display: none;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is a title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>



  <div class="question">
  <a href="#hide1" class="hide" id="hide1">First question</a>
  <a href="#show1" class="show" id="show1">First question after click</a>
  <div class="answer">
    <p>Here is the answer</p>
  </div>
  </div>

  <div class="question">
  <a href="#hide2" class="hide" id="hide2">Second question</a>
  <a href="#show2" class="show" id="show2">Second question after click</a>
  <div class="answer">
    <p>Here is the answer</p>
  </div>
  </div>

  <div class="question">
  <a href="#hide3" class="hide" id="hide3">Third question</a>
  <a href="#show3" class="show" id="show3">Third question after click</a>
  <div class="answer">
    <p>Here is the answer</p>
  </div>
  </div>

  <div class="question">
  <a href="#hide4" class="hide" id="hide4">Fourth question</a>
  <a href="#show4" class="show" id="show4">Fourth question after click</a>
  <div class="answer">
    <p>Here is the answer</p>
  </div>
  </div>

  </body>
</html>

Answer 1

您应该在第一个锚点后删除<br>标记：

<a href="#hide3" class="hide" id="hide3">Third question</a>
<br>
<a href="#show3" class="show" id="show3">Third question after click</a>

应该是：

<a href="#hide3" class="hide" id="hide3">Third question</a>
<a href="#show3" class="show" id="show3">Third question after click</a>

这是因为选择器.hide:target + .show获得了html的下一个元素。

Answer 2

这在CodePen中有效，因为它没有将目标href（例如＃34;＃hide3＆＃34;）附加到URL，因为CodePen位于iframe内部并且没有影响它的父页面。您的站点将您单击的元素的href附加到URL，然后以下CSS隐藏该元素：

.hide:target {
    display: none;
    text-decoration: none;
}

可折叠文本框无法正常显示

2 个答案: