html - 如何让DIV在点击时不断显示文字？

Question

我想要一种方法(理想情况下只使用 CSS HTML)，当我单击“问题”时，文本会显示并保留在那里。然后，如果他们再次单击文本，它将恢复为问题。

它在悬停时有效，但我不知道如何在单击时实现。 HTML:

<div id="packagequestioninfo">
  <p class="packagereplies">Question</p>
  <p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>

CSS:

#packagequestioninfo {
padding: 10px;
background: #F2F7FA;
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}

#packagequestioninfo:hover {
background-image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
cursor: none;
}

#packagequestioninfo .packagecomment {
display: none;

}

#packagequestioninfo:hover .packagereplies {
display: none;
}   
#packagequestioninfo:hover .packagecomment {
display: inline;
}

这是代码 http://jsfiddle.net/53UK2/

Answer 1

用css让.packagecomment无敌，再用jQuery:

$('p').click(function(){
     $('p').toggle();
});

fiddle :http://fiddle.jshell.net/RcTGN/