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

的第一个菜单滑动的向下和向上和第二菜单中上下。 我会slideDown第一个菜单，并在点击“标题”一个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(); 

试试这个！