Question

我可以使用我的代码来制作我想要的文本或任何我想要的文本点击或图像点击，但我无法收回它以使其再次隐藏。如何撤消此操作并使文本再次不可见（就像点击链接之前一样）？

.pink {
	width: 100%;
	color: #FFF;
	background-color: #ea0042;
	padding: 20px;
	box-shadow: 0px 5px 10px #D5D5D5;
}

a {
	color: inherit;
	text-decoration: none;
}

<div class="pink">

      <a href="#" onclick="document.getElementById('hiddenText').style.display='block'; return true;">
      <p> SEARCH FOR PRODUCTIONS </p>
      <img src="icon-arrow-down-b-128.png" alt="" height="15px">
      </a>
      <div style="display: none;" id="hiddenText">
      
   dasdgasasfgas
        </div>


</div>

Answer 1

你的意思是当你点击另一个按钮？

以下是使用display none ,,

＆＃13;

.pink {
	width: 100%;
	color: #FFF;
	background-color: #ea0042;
	padding: 20px;
	box-shadow: 0px 5px 10px #D5D5D5;
}

a {
	color: inherit;
	text-decoration: none;
}

＆＃13;

<div class="pink">

      <a href="#" onclick="document.getElementById('hiddenText').style.display='block'; return true;">
      <p> SEARCH FOR PRODUCTIONS </p>
      <img src="icon-arrow-down-b-128.png" alt="" height="15px">
      </a>
  
    <a href="#" onclick="document.getElementById('hiddenText').style.display='none'; return true;">
      <p> Hide </p>
      <img src="icon-arrow-down-b-128.png" alt="" height="15px">
      </a>
  
      <div style="display: none;" id="hiddenText">
      
   dasdgasasfgas
        </div>


</div>

＆＃13;

Answer 2

最简单的方法是使用jQuery中的toggle（）。因此，在我的回复的第一行，我将jquery导入解决方案：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<style>
.pink {
    width: 100%;
    color: #FFF;
    background-color: #ea0042;
    padding: 20px;
    box-shadow: 0px 5px 10px #D5D5D5;
}

a {
    color: inherit;
    text-decoration: none;
}
</style>



<div class="pink">

      <a href="#" id='toggleLink' >
      <p> SEARCH FOR PRODUCTIONS </p>
      <img src="icon-arrow-down-b-128.png" alt="" height="15px">
      </a>
      <div id="hiddenText">
             dasdgasasfgas
      </div>

</div>


<script>
$(function(){

    $('#toggleLink').click(function(){
        $('#hiddenText').toggle();
    });

}); 
</script>

如何显示和隐藏文字？

2 个答案: