Question

我有3个DIV（'事件'），每个都有一个孩子DIV（'事件详情'）。我希望能够保存“事件详细信息”的高度原始（根据“事件”而有所不同），然后将“事件详细信息”的高度设置为126px。然后点击一个按钮（'more'）后，我希望'event-details'返回到原来的高度。

我到目前为止保存了“事件详细信息”高度，将其更改为126px，但点击“更多”后，它将“事件详细信息”的高度更改为222px，无论其原始高度如何。< / p>

任何帮助？

JS

$(function() {

    $('.event').each(function() {
        var eventHeight = $(this).find('.event-details').height();
        console.log( eventHeight );

        $('.more').on('click', function (e) {
            e.preventDefault();

            $(this).parent('.event').toggleClass('show');
            $('.show > .event-details').css( 'height', eventHeight);
        });

    });

    $('.event-details').css( 'height', '126' );

});

HTML

<div class="event event-1925">
   <div class="event-details">
      <div class="year">1925</div>
      <div class="title">Home Away</div>
      <div class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
   </div>
   <a href="#" class="more">MORE</a>
</div>

<div class="event event-1925">
   <div class="event-details">
      <div class="year">1925</div>
      <div class="title">Home Away</div>
      <div class="copy">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
   </div>
   <a href="#" class="more">MORE</a>
</div>

<div class="event event-1925">
   <div class="event-details">
      <div class="year">1925</div>
      <div class="title">Home Away</div>
      <div class="copy">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
   </div>
   <a href="#" class="more">MORE</a>
</div>

感谢。

Answer 1

你遇到的问题是变量事件高度将在第一个每个循环中以下一个事件div的高度重置，所以基本上你将留下最后一个div的高度。您需要将每个div的高度存储在数组或对象中，然后检索它。

HTML

在html中使用唯一标识符，例如一个id

<div class="event event-1925">
  <div id="event-1"  class="event-details">
   .....
  </div>
</div>

的Javascript

$(function() {

  //create array to store all the event div heights
  var eventHeights = [];

  $('.event').each(function() {
    var eventHeight = $(this).find('.event-details').height();
    console.log( eventHeight );

    //get the id of the event div
    var id = $(this).find('.event-details').attr('id');

    //store the height with reference to the div id
    eventHeights[id] = eventHeight;


    $('.more').on('click', function (e) {
        e.preventDefault();

        $(this).parent('.event').toggleClass('show');

        //get the id of the event div
        var id = $(this).parent('.event').find('.event-details').attr('id');

        //use id to get the event div's height from array
        $('.show > .event-details').css( 'height', eventHeights[id]);
    });

  });

  $('.event-details').css( 'height', '126' );

}）;

我没有对此进行测试，它可以通过优化来实现，但希望它可以为您提供这个想法。

Answer 2

看起来您正在尝试构建可扩展字段集视图。基本上在较少的视图中，您希望显示标题或摘要，并在展开时显示更多详细信息。上面的答案会很好。以下是使用小动画完成此操作的另一种方法。要查看工作示例，请查看此link

2个事件的HTML标记将是

<div class=" event event-1925">
 Event Summary <a class="toogleButton">LESS</a>
</div>     
<div class="event-details">
  <div class="year">1925</div>
  <div class="title">Home Away</div>
  <div class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

<div class=" event event-1925">
 Event Summary <a class="toogleButton">LESS</a>
</div>     
<div class="event-details">
  <div class="year">1925</div>
  <div class="title">Home Away</div>
  <div class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

脚本

$(".event").click(function () {
    $header = $(this);
    $content = $header.next();
    $toogleBut = $header.children().first()
    $content.slideToggle(500, function () {
        $toogleBut.text(function () {
            return $content.is(":visible") ? "LESS" : "MORE";
        });
    });

});

最后一个简单的CSS来设置初始样式，例如你所需的高度

.event{
  height:126px;
}

单击后将DIV返回到原始高度

2 个答案: