我想在一些HTML文本中加入问题,在用户点击按钮/链接/等之前隐藏答案,然后消失,然后显示答案。答案取代了消失的按钮/链接所使用的空间。我希望在文章的页面中有这样的问题,而不仅仅是一个。
例如,在哪里" [我的想法]"是一个按钮或链接:
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>
答案 0 :(得分:1)
试试这段代码:
$element.click(function() {
$(this).hide();
$(this).next().css("visibility", "visible");
});
代码段:
$("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;
答案 1 :(得分:1)
那样的东西?出现文本,按钮消失
$(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>
答案 2 :(得分:1)
<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>
答案 3 :(得分:0)
(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>
假设您希望自己的问题和答案能够自包含在一个方框内,这是以最干净的方式实现这一目标的最佳解决方案。