php - 当点击离开时，php echo 中的 html 上的 css 事件不会保留

Question

下面是 php 文件中的 echo，它也使用 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;
}