jQuery手風琴的內容在單擊之前顯示？
[英]JQuery Accordion with content shown before click?
問題描述
因此，這有點令人困惑，但是我想使用JQuery手風琴在某些圖像下方顯示內容，這是一種定價。 我將僅加載圖像，以便你們可以看到我在做什么，但是我不確定如何使“ Click for Details”顯示在圖像下方，然后單擊該按鈕時，它將加載手風琴內容並將其更改為說“關閉”？ 請幫助！ :(
到目前為止，我的代碼...
<html>
<head>
<meta charset="UTF-8">
<style>
.accordion {
margin: 50px;
width:830px;
}
.accordion dd {
margin-bottom: 30px;
}
.accordion dt, .accordion dd {
border-bottom: 0;
}
.accordion dt:last-of-type, .accordion dd:last-of-type {
}
.accordion dt a, .accordion dd a {
display: block;
color: black;
font-weight: bold;
}
.accordion dd {
position: relative;
left: 0px;
top: -15px;
width:760px;
padding: 15px 10px 10px 10px;
border-top: 0;
font-size: 12px;
-moz-border-radius: 0 0 15px 15px;
border-radius: 0 0 15px 15px;
-webkit-box-shadow: 4px 4px 9px 0px rgba(148,148,148,1);
-moz-box-shadow: 4px 4px 9px 0px rgba(148,148,148,1);
box-shadow: 4px 4px 9px 0px rgba(148,148,148,1);
}
.accordion dd:last-of-type {
position: relative;
top: -1px;
}
.click {
color: #8aca38;
font-weight: 600;
font-size: 15px;
}
</style>
</head>
<body>
<dl class="accordion">
<dt><a href=""><img src="banner.jpg"></a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.<br>
<br>
<span class="click">Click for Details</span></dd>
<dt><a href=""><img src="banner.jpg"></a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.<br>
<br>
<span class="click">Click for Details</span></dd>
<dt><a href=""><img src="banner.jpg"></a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.<br>
<br>
<span class="click">Click for Details</span></dd>
</dl>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function($) {
var allPanels = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function() {
var dt = $(this).parent().next();
if(dt.data('visible') == true){
dt.slideUp();
dt.data('visible',false);
}
else{
dt.slideDown();
dt.data('visible',true);
}
return false;
});
})(jQuery);
</script>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2014-08-20 15:43:25
您可以通過CSS轉換添加和刪除類以實現此目的。
注意：我不得不更改html一點
<dd><p>...</p>
<span class="click">Click for Details</span></dd>
和JavaScript
(function($) {
//var allPanels = $('.accordion > dd').hide();
$('.accordion > dd > .click').click(function(e) {
e.preventDefault();
var dt = $(this).parent();
if(dt.data('visible') == true){
dt.removeClass('active');
dt.data('visible',false);
}
else{
dt.addClass('active');
dt.data('visible',true);
}
return false;
});
})(jQuery);
關鍵是CSS更改以將<p>的高度設置為0並在激活時將其展開
.accordion dd p {
height:0px;
overflow:hidden;
margin:1px;
-webkit-transition: height 1s;
-moz-transition: height 1s;
transition: height 1s;
}
.accordion dd.active p {
height:100px;
margin:1px;
}
Jquery 手風琴內容點擊事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.