jQuery slideDown菜单无效

时间:2013-05-08 11:35:22

标签: jquery html css

我遇到了与上周相同的麻烦。

我的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,第二个菜单应该是第二个菜单。 我的代码出了什么问题?

2 个答案:

答案 0 :(得分:2)

我认为这就是你想要的:

$(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()

答案 1 :(得分:0)

$('.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();

试试这个!