隐藏第三个之后的所有列表项并添加显示更多链接

Question

这类似于这个问题：Jquery, hide & show list items after nth item

我想隐藏第三个列表项之后的所有列表项并附加一个“显示更多链接” 链接显示更多链接必须指向显示更多...以便链接到正确的产品详细信息页面。

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>

这是我正在使用的脚本：

$('ul')
 .find('li:gt(2)')
 .hide()
 .end()
 .append(
 $('<li><a href="javascript:Detail('2163230');">Show More...</a></li>').click( function(){
  $(this).siblings(':hidden').show().end().remove();
 })
);

这是一个指向小提琴的链接，其中 url 已替换为指向 google 的链接：http://jsfiddle.net/jelane20/ecbwue8z/

有没有办法使用 javascript:Detail('2163230');网址？

Answer 1

我不确定您要做什么，但这是您需要做的：

http://jsfiddle.net/ecbwue8z/2/

说明：如果您尝试调用 js 函数，href 中的单引号将不起作用。您需要转义字符。

<a href="javascript:Detail("\2163230"\);"> 

编辑：这是新的解决方案：

   <script type="text/javascript">
    $('ul')
  .find('li:gt(2)')
  .hide()
  .end()
  .append(
  $('<br /><a href="?2163230");"">Show More...</a>').click(function () {
      $(this).siblings(':hidden').show().end().remove();
      Detail($(this).attr("href").substring(1,$(this).attr("href").length));
  })
 );

    function Detail(id) {
        window.location.href = "http://www.google.com?id=" + id;
    }

</script>