如何编码，以便在用户单击箭头时，段落隐藏和取消隐藏

How to code so that when users click on the arrow, the paragraph hide and unhide?

本文关键字：隐藏 单击 段落 取消 用户 何编码 编码      更新时间：2023-09-26

好的，看这个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>

我希望当用户单击图像时，它将删除<p> hidden并显示问题。

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

$('.question img').click(function() {
  $(this).next('p').slideToggle();
});
.hiddenContent {
  display: none;
}
.question img {
  cursor: pointer;
}
<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>

不使用

jQuery的纯javascript方式： 

<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>

我创建了一个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");
});
})

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

相关文章：