Question

好的，请看这个HTML代码

<p>This is question.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif.gif" alt="show answer" height="42" width="42">
<p hidden>This answer.</p>

我希望当用户点击图片时，它会移除hidden的{{1}}＆amp;显示问题。

如何以最少的代码实现这一目标？

Answer 1

＆＃13;

$('.question img').click(function() {
  $(this).next('p').slideToggle();
});

＆＃13;

.hiddenContent {
  display: none;
}

.question img {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="question" id="question-123">
<h3>This is question?</h3>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif.gif" alt="show answer" height="42" width="42" class="showContentBtn">
<p class="hiddenContent">This answer.</p>
</div>

＆＃13;

Answer 2

纯javascript方式，不使用jQuery：

<p>This is question.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42" id="showHideImg">
<p id="showHide">This answer.</p>
<script type="text/javascript">

document.getElementById("showHideImg").addEventListener("click",function(){
    if (document.getElementById("showHide").style.display=="none")
    {
      document.getElementById("showHide").style.display="block";
    }
    else
    {
      document.getElementById("showHide").style.display="none";
    }
},false)
</script>

Answer 3

我创建了一个JSFiddle。我敢肯定你可能会缩小它，但这是一个开始：https://jsfiddle.net/bsq32pds/ ..我建议如果答案应该被隐藏，你每次点击它制作的图像就写对服务器的AJAX调用以撤回答案。这将使人们不会检查页面，并在HTML代码中查看答案。

祝你好运!!

<!--html-->
<p>This is question.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif.gif" alt="show answer" height="42" width="42">
<p id="firstQ" class="hidden">This answer.</p>


//JS Code
//start on page load
$(function(){

//on image click
$("img").on( "click", function() {

//remove the class hidden
$("#firstQ").removeClass("hidden");
});
})

Answer 4

使用jquery＆amp;让它变得简单在jquery中有一个toggle方法，绑定事件＆amp;切换（隐藏和显示）元素例如，请参阅http://api.jquery.com/toggle/

上的演示

如何编码以便当用户点击箭头时段落隐藏和取消隐藏？

4 个答案: