jQuery slideDown菜單不起作用

我的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。當第一個菜單打開並且您點擊第二個菜單時，第一個菜單應該向上滑動並且第二個向下滑動。我的代碼有什麼問題？

來源

2013-05-08 Evolutio

jsFiddle演示：http://jsfiddle.net/Evolutio/tpzmZ/ – Evolutio 2013-05-08 11:39:30

消息正在向下滑動，但同時它們向上滑動。 – Evolutio 2013-05-08 11:43:00

我想這是你想要什麼：

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

來源

2013-05-08 11:45:22 Bill

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

試試這個！

來源

2013-05-08 11:58:28 joao

jQuery slideDown菜單不起作用

回答

相關問題