jQuery slideDown 菜单不起作用

Question

我遇到了和上周一样的麻烦。

我的 html 代码如下所示:

<article class="tickets">
                <div class="grid_12 left">
                    <div class="header">
                        <i class="icon-pushpin"></i>
                        Neue Tickets
                        <div class="count right"><span>6</span></div>
                    </div>
                    <div class="messages">
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                    </div>

                    <div class="header">
                        <i class="icon-pushpin"></i>
                        Neue Tickets
                        <div class="count right"><span>6</span></div>
                    </div>
                    <div class="messages">
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                    </div>
                </div>
            </article>

和 jQuery 部分:

$('.header').click(function(e) {
    $(this).siblings('.messages').slideDown(500);
    $(this).next().slideUp('normal');
    e.preventDefault();
});

第一个菜单上下滑动，第二个菜单向下滑动。 我会向下滑动第一个菜单，然后在单击“标题”后向上滑动。当第一个菜单打开并且您单击第二个菜单时，第一个菜单应该向上滑动，第二个向下滑动。 我的代码有什么问题？

Answer 1

我想这就是你想要的:

$(this).siblings('.messages').not($(this).next('.messages')).slideUp(500);
$(this).next('.messages').slideToggle('normal');

首先，我向上滑动所有 .message($(this).next('.messages') 除外)，然后切换 $(this).next('.messages')。我使用了切换开关，以便您可以关闭和打开它。

我已经更新了你的jsFiddle

来源

jQuery API - .not()