Question

我想在一些HTML文本中加入问题，在用户点击按钮/链接/等之前隐藏答案，然后消失，然后显示答案。答案取代了消失的按钮/链接所使用的空间。我希望在文章的页面中有这样的问题，而不仅仅是一个。

例如，在哪里＆＃34; [我的想法]＆＃34;是一个按钮或链接：

text text text
Does ABC need anything?
   [my thoughts]

text text text, text, text.

点击[我的想法]然后变成：

text text text
Does ABC need anything?
   ABC needs a a lot of DEF, and it will help ABC too if things are taken
   slowly.  Additionally, ABC needs a lot of sleep.
text text text, text, text.

每条评论：这是我发现的closest thing，但并不完全正确，因为我希望它继续在页面上使用它：

感谢Gothdo，我正在与之合作：

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test3</title>
    <script>
      $("button").click(function()
      {
        $(this).hide();
        $(this).next().css("visibility", "visible");
      });
    </script>
    <style type="text/css" >
        div {
           visibility: hidden;
        }
    </style>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button>test</button><div>test test test</div>
  </body>
</html>

Answer 1

试试这段代码：

$element.click(function() {
  $(this).hide();
  $(this).next().css("visibility", "visible");
});

代码段：

＆＃13;

$("button").click(function() {
  $(this).hide();
  $(this).next().css("visibility", "visible");
});

＆＃13;

div {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>test</button>
<div>test test test</div>

＆＃13;

Answer 2

那样的东西？出现文本，按钮消失

$(function(){
  var answer = $(".answer");
  var clickable = $(".clickable");
  answer.hide()
  $(".button").on("click", function(){
    $(this).hide()
    if(!answer.is(":visible")){
      answer.show().addClass("clickable")
    }else{
      answer.hide();
    }
  })
  //EXTRA:: makes the button and answer toggle on click
  $("body").on("click", ".clickable", function(){
    $(this).hide();
    if(!answer.is(":visible")){
      $(".button").show();
    }
  })
})

.button{
  display: inline-block;
  padding: 10px;
  background: powderblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="text">text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores. </div>
	<div class= "question">Does ABC need anything?</div>
	<div class="button"> [my thoughts]</div>
	<div class="answer"> ABC needs a a lot of DEF, and it will help ABC too if things are taken
   slowly.  Additionally, ABC needs a lot of sleep.</div>
	<div class="text">text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores.</div>

远离多个问题。

$(function(){

  $(".answer").hide()
  $(".button").on("click", function(){
    $(this).hide()
    // go to the parent of the button that was  and find the child `answer`
    if(!$(this).parent(".parent").find(".answer").is(":visible")){
      $(this).parent(".parent").find(".answer").show().addClass("clickable")
    }else{
      $(this).parent(".parent").find(".answer").hide();
    }
  })
  $("body").on("click", ".clickable", function(){
    $(this).hide();
    if(!$(this).parent(".parent").find(".answer").is(":visible")){
      // $(".button").show();
      $(this).parent(".parent").find(".button").show()
    }
  })


})

.button{
  display: inline-block;
  padding: 10px;
  background: powderblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="parent">
		<div class="text">text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores. </div>
		<div class= "question">Does ABC need anything?</div>
		<div class="button"> [my thoughts]</div>
		<div class="answer"> ABC needs a a lot of DEF, and it will help ABC too if things are taken
	   slowly.  Additionally, ABC needs a lot of sleep.</div>
		<div class="text">text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores.</div>
	</div>

	<!-- Other Question -->
	<hr>
	<div class="parent">
		<div class="text"> second text text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores. </div>
		<div class= "question">Does ABC need anything?</div>
		<div class="button"> [my thoughts 2ND]</div>
		<div class="answer"> 2ND ANSWER ABC needs a a lot of DEF, and it will help ABC too if things are taken
	   slowly.  Additionally, ABC needs a lot of sleep.</div>
		<div class="text">text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores.</div>
	</div>

Answer 3

希望这会对你有所帮助.... 我已经添加了html，css和js。如果你想要你可以使用外部css和js.I认为这是你所期望的。如果你尝试使用bootstrap，这将非常容易。

    <html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
  font-family: monospace;;
}

 .answer{
   display: none;

 }

</style>
<body>
<h4>text text text</h4>
<h4>Does ABC need anything</h4>
<button class="clickme">my thoughts</button>

<div>
  <span class="answer">ABC needs a a lot of DEF, and it will help ABC too if things are taken
   slowly.  Additionally, ABC needs a lot of sleep.</span>
   <span><h4>text text text text</h4></span>
<div>


<script type="text/javascript">
 $(document).ready(function(){
    $(".clickme").click(function(){
      $(".answer").fadeIn(1000);
      $(".clickme").hide();
    });
 });
</script>

</body>
</html>

Answer 4

(function($){
  
  $hint = $('#hint');
  $question = $('.question');
  $answer = $('.answer');
  
  $hint.click(function(){
    
    $answer.html("Yes!");
  
  });
  
})(jQuery);

.question{
  width: 200px;
  height: 50px;
  background: lightblue;
}
.answer{
  display: block;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <p class="question">Is my script sexy?
  <span class="answer"></span></p>
  <button id="hint">Hint</button>

</body>
</html>

假设您希望自己的问题和答案能够自包含在一个方框内，这是以最干净的方式实现这一目标的最佳解决方案。

隐藏点击的元素并使用jQuery显示元素

4 个答案: