在頁面加載時切換slideDown/slideUp多個狀態

當頁面加載時，我想要顯示內容的元素以及隱藏內容的元素。當用戶點擊標題時，元素將在隱藏和顯示之間切換，具體取決於他們當前的狀態。我寫的腳本的作品，但它有一個夸克，我覺得它需要一個if/else來確定.content的狀態以確定點擊。目前它要求用戶在隱藏的元素上點擊兩次以顯示.content。在頁面加載時切換slideDown/slideUp多個狀態

$('#services .content').hide(); 
$('.header').toggle(function() { 
    $(this) 
     .addClass('active') 
     .next('.content').slideUp(); 
    }, function() { 
     $(this) 
     .removeClass('active') 
     .next('.content').slideDown(); 
});

這裏是到jsfiddle

鏈接任何幫助深表感謝。謝謝。

來源

2011-11-09 benblustey

如果您在toggle功能掉在你的功能，它應該給你的影響，你想要的 -

$(function(){ 
    $('#services .content').hide(); 
    $('.header').click(function() { 
     if ($(this).next().is(':visible')) $(this).addClass('active').next('.content').slideUp(); 
     else $(this).removeClass('active').next('.content').slideDown(); 
    }); 
})

更新小提琴 - http://jsfiddle.net/daCkp/1/

來源

2011-11-09 18:20:15 ipr101

我也有這個想法，但現在你必須雙擊最初打開的關閉它們！ – maxedison

感謝您的快速響應。這個問題仍然存在，但在其他方面。這將需要顯示的其他元素，兩次點擊來啓動切換。 – benblustey

不，它不。現在您必須點擊兩次Content1和Content2才能隱藏它。 –

http://jsfiddle.net/tg5eZ/

沒有的if/else

$(function() { 
    $('#services .content').hide(); 
    $('.header').click(function() { 
     $(this).toggleClass('active').next('.content').slideToggle(); 
    }) 
});

我會還設立

#services .content

格樣式

display:none

，並刪除

$('#services .content').hide();

這使得它在Opera更好看。當我打開jsfiddle你提供我看到這個div是可見的，然後它隱藏。

來源

2011-11-09 18:35:03

在頁面加載時切換slideDown/slideUp多個狀態

回答

相關問題