Question

我将年份作为类别，将月份作为子类别。现在，当我点击年份时，我需要一个月来滑动，当我点击其他年份的特定年份时，应该隐藏。

这是我的代码：

<div class="archiveevnt">
<h2 class="subhead3">2012</h2>
<ul class="event1">
<li>Feb</li>
<li>Mar</li>
</ul>
</div>
<div class="archiveevnt">
<h2 class="subhead3">2013</h2>
<ul class="event1">
<li>Jan</li>
<li>Feb</li>
<li>Mar</li>
</ul>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('h2.subhead3').next('ul.event1').slideToggle();
        $('h2.subhead3').click(function(){
            $('h2.subhead3').next('ul.event1').slideUp();
            $(this).next('ul.event1').slideToggle();
            return false;
        })
    })
</script>

我的问题是当我点击年份滑落时，现在当我再次点击同一年的月份时不会滑动。感谢任何帮助或建议。

Answer 1

您只需要替换这行代码：

$('h2.subhead3').next('ul.event1').slideUp();

用这个：

$('h2.subhead3').not(this).next('ul.event1').slideUp();

$('h2.subhead3').not(this)将选择除当前范围内点击的元素之外的所有subhead3年元素。
此外，由于您在所有slideUp年元素上使用subhead3，然后在当前元素上使用slideToggle。这导致点击同一年月的行为不会滑动，而是滑动然后再次下降。

FIDDLE DEMO

Answer 2

您需要删除以下额外的代码行。

$（本）的.next（ 'ul.event1'）效果基本show（）;

以下是完整的工作代码

$（文件）。就绪（函数（）{ 。$（ 'h2.subhead3'）未来（ 'ul.event1'）的slideToggle（）; $（ 'h2.subhead3'）。点击（函数（）{ $（本）。接下来（ 'ul.event1'）的slideToggle（）。返回false; }） }）

如何slidetoggle divs

2 个答案: