php - css active on html inside php echo 当点击离开时不会停留

Question

下面是一个 php 文件中的回显，它也使用 sql 来获取数据。默认情况下使用 css display: 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;
}

Answer 1

改用 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;
}