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();
});

小提琴：http://fiddle.jshell.net/RcTGN/

Answer 2

如果您不需要IE8和更低的支持，您可以使用纯{c} this这样做。这是因为“：checked”css选择器。请参阅支持here。

HTML：

<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q1" />
    <label for="q1" class="qestion-text">Question 1 text</label>
    <label for="q1" class="qestion-answer">Question 1 answer</label>
</div>
<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q2" />
    <label for="q2" class="qestion-text">Question 2 text</label>
    <label for="q2" class="qestion-answer">Question 2 answer</label>
</div>

CSS：

.qestion-answer, .qestion-checkbox {
    display: none;
}
.qestion-checkbox:checked + .qestion-text {
    display:none;
}
.qestion-checkbox:checked + .qestion-text + .qestion-answer {
    display:block;
}

如果你确实需要IE8和更低的支持，你需要使用一些javascript / jQuery

Answer 3

仅使用css是不可能的。当然，您可以更改:hover而不是:active，但按住鼠标按钮时它会起作用。 Check it.

为什么不想使用jquery？这会更容易。

Answer 4

非jquery方式......

只需更改显示样式属性即可显示和隐藏：

HTML：

<script src="javascriptfile.js"></script>
<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>

javascriptfile.js：

// Wait for the entire window elements to be loaded
window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {

    if(document.getElementById('packagecomment').style.display !== 'none') {

      document.getElementById('packagecomment').style.display = 'none';

    } else {

      document.getElementById('packagecomment').style.display = 'block';

    }

  });
}

或者如果您想使用班级切换方法：

window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function()     {

    if(document.getElementById('packagecomment').className.indexOf('show')) {

      document.getElementById('packagecomment').className = '';

    } else {

      document.getElementById('packagecomment').className = 'show';

    }
  });
}

在这种方法中，您需要在CSS中添加一个类：

.show{
  display:block;
}

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

4 个答案: