Question

我有一个缩小版本的实际拥有但是它的方法相同，我正在努力解决的是当我点击LI中的更多链接时我需要设置一个scrolltobottom底部函数但是我无法工作如果我点击它的最后一个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。

Answer 1

你的意思是这样的：

$('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);
});

jQuery：从单击链接并执行actionf或者它获取最后一个li

1 个答案: