javascript - 如何使用javascript显示无序列表中的一半元素？

Question

我正在开发一个网站，我需要在页面中显示图像列表。但是，页面需要显示列表中的一半图像，当用户单击“显示更多”按钮时，它应该显示列表中的其余图像。我怎样才能使用 JavaScript 做到这一点？下面是我正在使用的 html。

<div class="pic_holder">
        <ul>

        <li>
            <a href="#"><img src="images/6001.jpg"></a>
            <span class="text-content "><span>
                <div class="head_name">Place Name</div>
                <div class="subhead_name">Place Name</div>
            </span></span>

        </li>
        <li>
            <a href="#"><img src="images/600_O2.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name">Place Name</div>
                <div class="subhead_name">Place Name</div>
            </span></span>


        </li>
        <li>
            <a href="#"><img src="images/600-v4.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>

        <li>
            <a href="#"><img src="images/6001.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>
        <li>
            <a href="#"><img src="images/600_O2.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>

        <li>
            <a href="#"><img src="images/600-v4.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>

  <div class="show_more">
        <h2>Show More</h2>

    </div>

Answer 1

解决方案应该是:

var $items = $("ul li");
$items.hide();
$items.slice(0, Math.floor($items.length/2)).show();

在“显示更多”按钮中，您只需显示所有元素。

var $items = $("ul li");
$items.show();