我有一个顶部有多个div的背景图像,作为图像部分的“标签”。我只想显示div的标题/标题,然后当你点击div时,段落(描述)显示(有点像'阅读更多')。每个div都有自己的id,我想要显示的每个段落都有自己的id。我是使用jQuery的新手,无法弄清楚如何:
这里是jsfiddle https://jsfiddle.net/dmo1111/8n1bLb52/#&togetherjs=cB0QuczANm
CSS
[mobile] {
position: relative;
padding: 20px 10px 50px 10px;
[info~="mobile"] {
position: absolute;
z-index: 10;
top: -10px;
#show1,
#show2,
#show3,
#show4,
#show5,
#show6,
#show7 {
display: none;
padding-bottom: 15px;
}
}
}
HTML
<div mobile>
<div info="mobile" id="mobile1">
<h3 class="great-primer">Title 1 <i class="fa fa-caret-down"></i></h3>
<p class="long-primer" id="show1">Paragprah description for first label.</p>
</div>
<div info="mobile" id="mobile2">
<h3 class="great-primer">Title 2 <i class="fa fa-caret-down"></i></h3>
<p class="long-primer" id="show2">Paragprah description for second label.</p>
</div>
<div info="mobile" id="mobile3">
<h3 class="great-primer">Title 3 <i class="fa fa-caret-down"></i></h3>
<p class="long-primer" id="show3">Paragprah description for third label.</p>
</div>
<div info="mobile" id="mobile4">
<h3 class="great-primer">Title 4 <i class="fa fa-caret-down"></i></h3>
<p class="long-primer" id="show4">Paragprah description for fourth label.</p>
</div>
<div info="mobile" id="mobile5">
<h3 class="great-primer">Title 5 <i class="fa fa-caret-down"></i></h3>
<p class="long-primer" id="show5">Paragraph description for fifth label.</p>
</div>
</div>
jquery的
$("#mobile1").click(function() {
$("#show1").toggle(1000);
$(this).animate({
top: '10px'
});
});
$("#mobile2").click(function() {
$("#show2").toggle(1000);
$(this).animate({
top: '20px'
});
});
$("#mobile3").click(function() {
$("#show3").toggle(1000);
$(this).animate({
top: '50px'
});
});
$("#mobile4").click(function() {
$("#show4").toggle(1000);
$(this).animate({
top: '60px'
});
});
$("#mobile5").click(function() {
$("#show5").toggle(1000);
$(this).animate({
top: '80px'
});
});
对不起,如果这看起来像一团糟/很多一次!我整个早上都搜索了一堆论坛来帮助我,但没有运气。我希望自己可以搞清楚,但我也不太了解jQuery,以确保它是“最简单的”如果有人能帮助我,我会非常感激!
答案 0 :(得分:1)
您的代码的简化版本:
<script>
$(document).ready(function(){
$("#mobile1, #mobile2, #mobile3, #mobile4, #mobile5").click(function() {
$(this).find('.long-primer').toggle(1000);
var divTop = $(this).position().top;
$(this).animate({
top: divTop+'10px'
});
});
});
</script>
更好的选择:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Title 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Paragprah description for first label.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Title 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Paragprah description for second label.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Title 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Paragprah description for third label.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Title 4</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">Paragprah description for fourth label.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Title 5</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">Paragprah description for fifth label.</div>
</div>
</div>
</div>
</div>
</body>
</html>