Question

我有以下Fiddle Example：

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

我需要以下内容：

单击触发器时，向下/向上滑动面板的ID与其href相同。
单击面板内的按钮关闭时，向上滑动该面板。

我能够使用以下方法解决它：

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

我不知道如何使用Trigger类以及如何使Close工作。
我也不确定动画是否是最佳选择。

Answer 1

<强> WORKING FIDDLE

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

适用于地图和文字。

Answer 2

另一种方法，使其更具扩展性（只要您将<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 3

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

只需添加此块即可使密切链接正常工作，其中 #close-map 是关闭链接的ID

向上和向下滑动面板

3 个答案: