Question

所以这有点令人困惑，但我想用JQuery手风琴在一些图像下面显示内容，这是一种定价的东西。我只是加载图片，这样你们就可以看到我在做什么，但我不确定如何制作＆＃34;点击查看详细信息＆＃34;显示在图像下方，然后当它被点击时，它会加载手风琴内容并更改为＆＃34;关闭＆＃34;？请帮忙！：（

Open Content

Closed Content

我的代码到目前为止......

    <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>

Answer 1

您可以使用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);

fiddle

关键是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 Accordion？

1 个答案: