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

第一个菜单幻灯片向下和向上，第二个菜单向下。我会滑动第一个菜单，然后点击“标题”一个slideUp。当第一个菜单打开时，我点击第二个菜单，第一个菜单应该是slideUp，第二个菜单应该是第二个菜单。我的代码出了什么问题？

Answer 1

我认为这就是你想要的：

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

首先，我向上滑动所有.message（除了$(this).next('.messages')），然后我切换$(this).next('.messages')。我已经习惯了切换，你可以关闭并打开它。

我已更新您的jsFiddle

<强>来源（S）

jQuery API - .not()

Answer 2

$('.messages').hide();



clickme=function(){

$('.header').click(function(e) {

    $(this).siblings('.messages').slideDown(500);
    $(this).off('click');
    $(this).click(function(){
        $(this).siblings('.messages').slideUp('normal');
    })
        $(this).on('click',clickme);    
});
}
clickme();

试试这个！

jQuery slideDown菜单无效

2 个答案: