代码之家 › 专栏 › 技术社区 › Yash009

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

css html jquery javascript

Yash009 · 技术社区 · 7 年前

我有一个菜单,其中有带有子类别的类别。我想显示/隐藏列表元素,但关键是我需要前两个元素一直显示。我试着到处寻找解决方案,我最接近的是 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();
});

2 回复 | 直到 7 年前

Naga Sai A 7 年前

为达到预期效果,使用以下选项

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>

arunes 7 年前

将执行幻灯片切换的javascript更改为这样;

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