0

我有一个我实际拥有的缩小版本，但它的方法相同，我正在努力解决的是当我点击 LI 中的更多链接时，我需要设置一个滚动底部功能，但我不知道如何执行条件，如果我单击并且它的最后一个 LI 执行此操作。有任何想法吗？

<ul>
  <li>
    <div class="truncated_text_wrapper">
      <div class="truncated_text" style="display: none;">sending this test message sending this test message sending... (<a data-action="expand_text" href="#">more</a>)
      </div>
      <div style="" class="complete_text">sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message (<a data-action="shrink_text" href="#">less</a>)
       </div>
      </div>
      <a class="link" href="#">more</a>
  </li>
  <li>
    <div class="truncated_text_wrapper">
      <div class="truncated_text" style="display: none;">sending this test message sending this test message sending... (<a data-action="expand_text" href="#">more</a>)
      </div>
      <div style="" class="complete_text">sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message (<a data-action="shrink_text" href="#">less</a>)
       </div>
      </div>
      <a class="link" href="#">more</a>
  </li>
  <li>
    <div class="truncated_text_wrapper">
      <div class="truncated_text" style="display: none;">sending this test message sending this test message sending... (<a data-action="expand_text" href="#">more</a>)
      </div>
      <div style="" class="complete_text">sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message (<a data-action="shrink_text" href="#">less</a>)
       </div>
      </div>
      <a class="link" href="#">more</a>
  </li>
  <li>
    <div class="truncated_text_wrapper">
      <div class="truncated_text" style="display: none;">sending this test message sending this test message sending... (<a data-action="expand_text" href="#">more</a>)
      </div>
      <div style="" class="complete_text">sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message sending this test message (<a data-action="shrink_text" href="#">less</a>)
       </div>
      </div>
      <a class="link" href="#">more</a>
  </li>
</ul>

我工作过的JS如下：

var carousel = setupCarousel();

  $(".truncated_text_wrapper .truncated_text a[data-action=expand_text]").live("click", function(){
    $(this).parents(".truncated_text").hide();
    $(this).parents(".truncated_text_wrapper").find(".complete_text").show();
        if($(this).siblings().length===0) {
            carousel.scrollToBottom();
            console.log('moved');
        }
        return false;  
  });

如果兄弟姐妹滚动到底部，您会看到我尝试过 - 如果它是单击更多按钮的最后一个 LI，我只想采取行动。

4

1 回答 1

0

你的意思是这样的：

$('ul').find('li a').on('click', function(){
   window.scrollTo(0, document.scrollHeight);
});

或者只有最后一个 LI：

$('ul').find('li:last-child a').on('click', function(){
   window.scrollTo(0, document.scrollHeight);
});

或者动画滚动到点击的元素：

$('ul').find('li:last-child a').on('click', function(e){
   e.preventDefault() // this time you want the anchor to do nothing
   var elem = this;
   $("html, body").animate({ scrollTop: $(elem.href).offset().top }, 1000);
});
于 2013-10-15T10:03:31.513 回答