12

我正在尝试创建一个博客存档列表，该列表按年和月显示所有文章（我已经使用 PHP/MySQL 完成了）

现在我正在努力做到这一点，以便在页面加载时，所有年份都被折叠，除了最近的一年/月，而且每个年份都会在点击时折叠/展开。

目前，我的 jQuery 单击功能将打开或关闭所有 li 元素，而不仅仅是我单击的那个。我对 jQuery 还是很陌生，所以不知道如何让它只影响我单击的列表部分。

任何帮助都会很重要！

到目前为止，这是我的代码（列表是从 PHP/MySQL 循环生成的）

<ul class="archive_year">
<li id="years">2012</li>
    <ul class="archive_month">
        <li id="months">September</li>
            <ul class="archive_posts">
                <li id="posts">Product Review</li>
                <li id="posts">UK men forgotten how to act like Gentlemen</li>
                <li id="posts">What Do Mormons Believe? Ex-Mormon Speaks Out</li>
                <li id="posts">Here is a new post with lots of text and a long title</li>
            </ul>
        <li id="months">August</li>
            <ul class="archive_posts">
                <li id="posts">A blog post with an image!</li>
            </ul>
    </ul>
<li id="years">2011</li>
    <ul class="archive_month">
        <li id="months">July</li>
            <ul class="archive_posts">
                <li id="posts">New Blog!</li>
            </ul>
    </ul>
<li id="years">2009</li>
    <ul class="archive_month">
        <li id="months">January</li>
            <ul class="archive_posts">
                <li id="posts">Photography 101</li>
            </ul>
    </ul>
</ul>​

到目前为止，这是 jQuery：

$(document).ready(function() {

//$(".archive_month ul:gt(0)").hide();

$('.archive_month ul').hide();

$('.archive_year > li').click(function() {
    $(this).parent().find('ul').slideToggle();
});

$('.archive_month > li').click(function() {
    $(this).parent().find('ul').slideToggle();
});


});

我正在试验 $(".archive_month ul:gt(0)").hide(); 但它没有按预期工作，它会切换打开和关闭。

有什么帮助/想法吗？

此外，这里是一个现场例子的小提琴：http: //jsfiddle.net/MrLuke/VNkM2/1/

4

2 回答 2

25

先说问题：

  1. ID-s 必须是唯一的！
  2. 你必须正确嵌套你的<li>-s

这是解决问题的方法 -演示

jQuery

$('.archive_month ul').hide();

$('.months').click(function() {
    $(this).find('ul').slideToggle();
});

HTML （固定）

<ul class="archive_year">
<li class="years">2012
    <ul class="archive_month">
        <li class="months">September
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
                <li class="posts">Article 2</li>
                <li class="posts">Article 3</li>
                <li class="posts">Article 4</li>
            </ul>
        </li>
        <li class="months">August
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>
<li class="years">2011</li>
    <ul class="archive_month">
        <li class="months">July
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>
<li class="years">2009</li>
    <ul class="archive_month">
        <li class="months">January
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</ul>
于 2012-09-18T16:16:39.190 回答
0

我用它来显示我 ERP 中发票的历史记录，它就像一个魅力：

  • 列表仅显示最后一个事件 (last li)
  • 带有隐藏事件计数的“显示更多”元素
  • onclick，显示所有隐藏的事件并隐藏我的“显示更多”元素

在下面的示例中，已单击第二行“显示更多”元素：

ERP 发票历史 ul>li 带有隐藏元素的列表

HTML / Smarty 模板：

<td class="col-xs-2" id="iv-status-{$invoice.sale_invoice_id}">
    <ul class="history" id="history-{$invoice.sale_invoice_id}">
        {if $invoice.events|@count > 1}
            <li class="history-more">
                <i class="fal fa-ellipsis-h"></i> 
                afficher {$invoice.events|@count} évènements
            </li>
        {/if}
        <li class="history-hidden">
            <b>{$invoice.dates.created.timeline}</b><br>
            <i class="fal fa-file-plus"></i> Facture créée par {$invoice.log.employee.firstname}
        </li>
        {foreach $invoice.events as $ev}
            {if $ev.event == 'download'}
                <li class="history-hidden">
                    <b>{$ev.dates.timeline}</b><br>
                    <i class="fal fa-download"></i> Facture téléchargée par {$ev.employee.firstname}
                </li>
            {/if}
            {if $ev.event == 'print'}
                <li class="history-hidden">
                    <b>{$ev.dates.timeline}</b><br>
                    <i class="fal fa-print"></i> Facture imprimée par {$ev.employee.firstname}
                </li>
            {/if}
            ...
            {if $ev.event == 'close'}
                <li class="history-hidden">
                    <b>{$ev.dates.dateline}</b><br>
                    <i class="fal fa-file-check"></i> Facture clôturée par {$ev.employee.firstname}
                </li>
            {/if}
        {/foreach}
    </ul>
</td>

jQuery :

$('.history').each(function() {
    $('.history li:last-child')
        .addClass('history-last')
        .removeClass('history-hidden');
    $(this).children('li.history-more').click(function(e) {
        ul = $(this).parent('ul').attr('id');
        $('#' + ul).children('li.history-more').hide();
        $('#' + ul).children('li.history-hidden').show();
    });
});

CSS：

li.history-more {
    cursor: pointer;
}
li.history-hidden {
    display: none;
}
于 2021-07-19T09:39:18.113 回答