时间戳

首页 > 解决方案 > 在 Jquery 中切换列表元素，同时始终显示前几个元素

javascript - 在 Jquery 中切换列表元素，同时始终显示前几个元素

问题描述

我有一个菜单，其中包含子类别的类别。我想显示/隐藏列表元素，但问题是我需要前 2 个元素一直显示。我试图到处寻找解决方案，我最接近的是在一定数量的匹配元素之后的 jQuery 切换显示/隐藏元素， 但这似乎对我不起作用，因为我的过滤器稍微复杂一些。有人可以帮我解决这个问题。单击“子类别”显示/隐藏链接。另外我必须添加默认状态必须折叠。

我没有任何风格的基本小提琴

HTML 代码：

<li class="children level1">
    <a href="https://dev.holmescustom.com/signage/office-signage">
        <span>Office Signs</span>
    </a>
    <ul class="level1" style="display: block;">
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
                <span>Wash Hands and Hygiene</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
                <span>Entrance &amp; Exit Signage</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
                <span>Way-finding Signage</span>
            </a>
        </li>
    </ul>
</li>
<li class="children level1">
    <a href="https://dev.holmescustom.com/signage/shop-by-template">
        <span>Shop by Template</span>
    </a>
    <ul class="level1" style="display: block;">
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
                <span>Smoking &amp; Vaping</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
                <span>Parking</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
                <span>Store Hours</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
                <span>Restrooms</span>
            </a>
        </li>
    </ul>
</li>

jQuery代码：

jQuery('li.children.level1').each(function () {
    if (jQuery(this).find('ul').length) {
        jQuery(this).append('<a href="#" class="subCat">Sub-Categories</a>');
    }
});
jQuery('.subCat').click(function () {
    jQuery(this).prev('ul:first.level1').slideToggle();
});

标签： javascriptjqueryhtmlcss

解决方案

要达到预期结果，请使用以下选项

jQuery('.subCat').click(function () {
    jQuery(this).parent().find('li:gt(1)').slideToggle();
});
  1. 子类别父
  2. 查找 li 大于 1 （li 的索引从 0 开始）
  3. 默认隐藏，使用jQuery(this).find('li:gt(1)').hide()

代码示例供参考 - https://codepen.io/nagasai/pen/omYKzv?editors=1010

jQuery('li.children.level1').each(function () {
    if (jQuery(this).find('ul').length) {
        jQuery(this).append('<a href="#" class="subCat">Sub-Categories</a>');
    }
  jQuery(this).find('li:gt(1)').hide()
});
jQuery('.subCat').click(function () {
    jQuery(this).parent().find('li:gt(1)').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="children level1">
    <a href="https://dev.holmescustom.com/signage/office-signage">
        <span>Office Signs</span>
    </a>
    <ul class="level 1" style="display: block;">
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
                <span>Wash Hands and Hygiene</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
                <span>Entrance &amp; Exit Signage</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
                <span>Way-finding Signage</span>
            </a>
        </li>
    </ul>
</li>
<li class="children level1">
    <a href="https://dev.holmescustom.com/signage/shop-by-template">
        <span>Shop by Template</span>
    </a>
    <ul class="level1" style="display: block;">
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
                <span>Smoking &amp; Vaping</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
                <span>Parking</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
                <span>Store Hours</span>
            </a>
        </li>
        <li class="level2">
            <a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
                <span>Restrooms</span>
            </a>
        </li>
    </ul>
</li>

推荐阅读