css在php echo dons'；点击时不要停留.下面的 - css active on html inside php echo doesn't stay when click is left

css active on html inside php echo doesn't stay when click is left

本文关键字：停留 echo php dons css | 更新日期: 2023-09-27

是php文件中的一个echo，该文件也使用sql来获取数据。默认情况下，答案使用css显示隐藏：none。但当点击显示答案时，它会显示出来。我的问题是，当点击时，答案不会一直显示出来。就像当我点击时，它会显示，但当我离开点击时不会停留。我该如何让它停留？

echo "<div class='span3 tiny'>
            <div class='pricing-table-header-tiny'>
                <h2>" . $row['Question'] . "</h2>

            </div>
                <a id='s'>Show answer</a>
                <div class='dq'>
                    <div class='pricing-table-features'>
                        <p>" . $row['Answer'] . "</p>
                    </div>
                    <div class='Dass'>
                        <p id='Dassp'>Answered by:" . $row['Doctor'] . "<p>
                    </div>
                </div>
    </div>";  //$row['index'] the index here is a field name

.dq {
	display: none;
}
#s:active~ .dq {
display:block;
}
#s {
  padding: 5px 15px;
  background: #ddd;
  cursor: pointer;
}

改为使用jQuery：

$('#s').on('click', function(e) {
    e.preventDefault();
    $('.dq').toggleClass('show-answer');
});

然后将您的CSS替换为以下内容：

.dq {
    display: none;
}
.dq.show-answer {
display:block;
}
#s {
  padding: 5px 15px;
  background: #ddd;
  cursor: pointer;
}

使用纯css实现此

看看它是怎么做的！！

您必须将a标记设为link，才能在":active"状态下工作。

<a href="" id="s">

并编写:focus状态的样式也是

唯一的缺点是，当您在元素外部单击时，active状态将消失。在这种情况下，您必须使用jquery。

#s:active~ .dq,  #s:focus~ .dq{
      display: block;
    }

.dq {
  display: none;
}
a{
  text-decoration: none;
 }
#s:active~ .dq,  #s:focus~ .dq{
  display: block;
}
#s {
  padding: 5px 15px;
  background: #ddd;
  cursor: pointer;
}

<div class='span3 tiny'>
  <div class='pricing-table-header-tiny'>
    <h2>" Question : whats is the question ?"</h2>
  </div>
  <a id='s' href="#">Show answer</a>
  <div class='dq'>
    <div class='pricing-table-features'>
      <p>" Hi this is the answer "</p>
    </div>
    <div class='Dass'>
      <p id='Dassp'>Answered by: "Kim"
        <p>
    </div>
  </div>
</div>

这里是您的答案。。使用jquery 简化

$('#s').on('click', function(e) {
    e.preventDefault();
    $('.dq').toggleClass('active');
});

.dq {
	display: none;
}
.dq.active {
display:block;
}
#s {
  padding: 5px 15px;
  background: #ddd;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div><div class="dq">dq</div>
<button id="s" >btn</button>