Question

我有一个菜单，其中包含带有子类别的类别。我想显示/隐藏列表元素，但要注意的是我需要前2个元素始终显示。我试图在各处寻找解决方案，而我来的最近的是jQuery toggle show/hide elements after a certain number of matching elements 但这似乎对我不起作用，因为我的过滤器稍微复杂了一点。有人可以帮我吗单击“子类别”显示/隐藏链接。另外我还必须添加默认状态必须折叠。

My basic fiddle without any style

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

Answer 1

要获得预期结果，请使用以下选项

jQuery('.subCat').click(function () {
    jQuery(this).parent().find('li:gt(1)').slideToggle();
});

父类别的子类别
找到大于1的li（li的索引从0开始）
默认情况下，使用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>

Answer 2

按此更改执行slideToggle的JavaScript；

jQuery('.subCat').click(function () {
  var ul = jQuery(this).prev('ul:first.level1');
  var li = ul.find('li:gt(1)');
  li.slideToggle();
});

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

2 个答案: