如何修改jQuery代码实现点击View More每次显示2个listing-item、点击View Less每次收起2个？

Perfect, let's tweak your code to get that incremental show/hide behavior you're looking for. Here's a complete, adjusted solution with explanations:

Modified HTML #

We've removed the initial collapsed class since we'll handle visibility via JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="listing-item-container"> 
    <div class="listing-item"> 
        <p>FEATURES</p> 
        <ul class="no-list-style"> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
        </ul> 
    </div> 
    <div class="listing-item"> 
        <p>FEATURES</p> 
        <ul class="no-list-style"> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
        </ul> 
    </div> 
    <div class="listing-item"> 
        <p>FEATURES</p> 
        <ul class="no-list-style"> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
        </ul> 
    </div>
    <div class="listing-item"> 
        <p>FEATURES</p> 
        <ul class="no-list-style"> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
        </ul> 
    </div> 
    <div class="listing-item"> 
        <p>FEATURES</p> 
        <ul class="no-list-style"> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
            <li>list content</li> 
        </ul> 
    </div> 
    <!-- 100 more listing-item divs present here --> 
</div>

Simplified CSS #

We've stripped down the styles to focus on button visibility and basic layout:

/* Basic button styling (customize as needed) */
.btn {
    margin: 12px 0;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.more {
    background-color: #007bff;
    color: white;
}

.less {
    background-color: #6c757d;
    color: white;
}

Updated JavaScript #

This handles the incremental show/hide logic and button state changes:

$(document).ready(function () {
    const container = $(".listing-item-container");
    const allItems = container.find(".listing-item");
    const totalItemCount = allItems.length;
    let visibleItemCount = 2; // Start with first 2 items visible

    // Create buttons
    const moreBtn = $('<button class="btn more">View More</button>');
    const lessBtn = $('<button class="btn less">View Less</button>');
    
    // Add buttons to container
    container.append(moreBtn, lessBtn);

    // Initialize state: show first 2 items, hide Less button
    allItems.hide().slice(0, visibleItemCount).show();
    lessBtn.hide();

    // View More click handler
    moreBtn.click(function() {
        // Show next 2 items, cap at total count
        visibleItemCount = Math.min(visibleItemCount + 2, totalItemCount);
        allItems.hide().slice(0, visibleItemCount).show();
        
        // Update button visibility
        if (visibleItemCount === totalItemCount) {
            moreBtn.hide();
        }
        if (visibleItemCount > 2) {
            lessBtn.show();
        }
    });

    // View Less click handler
    lessBtn.click(function() {
        // Hide last 2 items, floor at 2 visible items
        visibleItemCount = Math.max(visibleItemCount - 2, 2);
        allItems.hide().slice(0, visibleItemCount).show();
        
        // Update button visibility
        if (visibleItemCount === 2) {
            lessBtn.hide();
        }
        if (visibleItemCount < totalItemCount) {
            moreBtn.show();
        }
    });
});

How It Works #

• Initial State: Only the first 2 listing items are visible, with the "View More" button active and "View Less" hidden.
• View More: Each click reveals the next 2 items. The button stays visible until all items are displayed, then it hides and "View Less" appears.
• View Less: Each click hides the last 2 visible items. The button stays visible until only the first 2 items are left, then it hides and "View More" comes back.
• Count Tracking: We use visibleItemCount to keep track of how many items are shown, ensuring we never go below 2 or exceed the total number of items.

内容的提问来源于stack exchange，提问作者user_59910105