滑动面板上下滑动

Question

我有下面的小提琴例子

<div class="panel" id="map">
  <a href="#" class="close">Close</a>
  <img src="http://placehold.it/880x120"/>    
</div>
<div class="panel" id="text">
  <a href="#" class="close">Close</a>
  Lorem ipsum dolor sit amet
</div>
<div class="content">
  <a href="#map" id="open-map" class="trigger">Open Map</a><br>
  <a href="#text" id="open-map" class="trigger">Open Text</a>
  <p>
    Integer mattis felis in felis eleifend ...       
  </p>
</div>

#map {border: solid 1px red;}

#text {border: solid 1px blue;}

img {display: block;}

div.panel {
  position: relative;
  overflow: hidden;
  display: none;    
}

div.panel a {
  background-color: yellow;
  color: @red;
  display: inline-block;
}

我需要以下几点：

1. 单击触发器时，滑动/向上切换面板上的id，与其href中的相同。
2. 当单击面板内的按钮关闭时，将该面板向上滑动。

我能够用以下方法解决这个问题：

$('#open-map').click(function(){
    var $helper = $('#map');
    $helper.animate({
        height: "toggle"
    }, {
        duration: 200,
        progress: function(){
           $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

1. 我不知道如何使用触发器类和如何使关闭工作。
2. 我也不确定动画是否是最好的选择。

Answer 1

另一种方法(只要将<a>元素的href属性与目标元素的id关联起来)使其更具可扩展性：

// binding a click-handler to the <a class="close"> elements:
$('a.close').on('click', function (e) {
    // slide-toggling the closest <div class="panel"> ancestor element,
    // although slideUp() could be used, since if the element is hidden the
    // a.close element can't be clicked:
    $(this).closest('.panel').slideToggle();
});

// binding a click handler to the .trigger elements:
$('.trigger').on('click', function () {
    // getting a reference to the clicked-element:
    var clicked = $(this),
        // forming an array of all the sibling .trigger elements,
        ids = clicked.siblings('.trigger')
                  // adding back the clicked element:
                  .addBack().map(function () {
                      return this.getAttribute('href');
                  }).get();
    // finding all the elements associated with those .trigger elements:
    $(ids.join(',')).each(function () {
        // iterating over the collection with each(),
        // if the href attribute (not property) of the clicked element
        // contains the string of the id of the current element at
        // an index of 1:
        if (clicked.attr('href').indexOf(this.id) === 1) {
            // we slideToggle() the relevant element:
            $(this).slideToggle();
        } else {
            // otherwise we simply close the element:
            $(this).slideUp();
        }
    });
});

​

$('a.close').on('click', function(e) {
  $(this).closest('.panel').slideToggle();
});

$('.trigger').on('click', function() {
  var clicked = $(this),
    ids = clicked.siblings('.trigger').addBack().map(function() {
      return this.getAttribute('href');
    }).get();
  $(ids.join(',')).each(function() {
    if (clicked.attr('href').indexOf(this.id) === 1) {
      $(this).slideToggle();
    } else {
      $(this).slideUp();
    }
  });
});

.panel {
  display: none;
}
.trigger {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="map"> <a href="#" class="close">Close</a>
  <img src="http://placehold.it/880x120" />
</div>
<div class="panel" id="text"> <a href="#" class="close">Close</a>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet, urna id dignissim venenatis, mi metus convallis purus, et tincidunt nunc leo sit amet lectus. Nullam vitae efficitur purus. Nulla facilisi. Praesent mauris massa, ullamcorper ut
  varius vitae, porttitor id augue.</div>
<div class="content"> <a href="#map" id="open-map" class="trigger">Open Map</a>
  <a href="#text" id="open-text" class="trigger">Open Text</a>

</div>

​

参考文献：

• JavaScript：
  • Element.getAttribute()。
  • String.prototype.indexOf()。

​

• jQuery：
  • addBack()。
  • closest()。
  • get()。
  • map()。
  • on()。
  • siblings()。
  • slideToggle()。
  • slideUp()。

​

Answer 2

工作小提琴

$('#open-map').click(function(){
    $('#map').slideToggle('slow');
});
$('#open-text').click(function(){
    $('#text').slideToggle('slow');
});
$('.close').click(function(){
    $(this).parent().slideUp('slow');
});

同时适用于地图和文本。

Answer 3

$('#close-map').click(function(){
var $helper = $('#map');
$helper.animate({
            height: "toggle"
        }, {
        duration: 200,
        progress: function(){
            $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

只需添加此块以使关闭链接工作，其中# close -map是关闭链接的id。