jquery切換將不會關閉點擊

我有這個代碼爲手風琴風格切換。很好的工作，唯一的問題是，如果你點擊一個開放的手風琴，它會滑落然後回落。它不滑動關閉。jquery切換將不會關閉點擊

有什麼想法？

謝謝！

//toggles 2 
$('body').on('click','.toggle h3 a', function(){ 

    if($(this).parents('.toggles').hasClass('accordion')) return false; 

    $(this).parents('.toggles').find('.toggle > div').slideUp(300); 
    $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign'); 
    $(this).parents('.toggles').find('.toggle').removeClass('open'); 

    $(this).parents('.toggle').find('> div').slideDown(300); 
    $(this).parents('.toggle').addClass('open'); 

    //switch icon 
    if($(this).parents('.toggle').hasClass('open')){ 
     $(this).find('i').attr('class','icon-minus-sign'); 
    } else { 
     $(this).find('i').attr('class','icon-plus-sign'); 
    } 

    return false; 
}); 



<div class="toggles"> 

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>First Accord</a></h3> 
    <div> 
    Content 
    </div> 
</div> 

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>Second Accord</a></h3> 
    <div> 
    Content 
    </div> 
</div>

來源

2014-10-17 joshdfw

恐怕那些'div'選擇器出了問題。我們可以看到相關的html嗎？ – 2014-10-17 15:23:19

感謝您的回覆！添加HTML – joshdfw 2014-10-17 15:39:27

對不起，我真的不明白髮生了什麼你的代碼發生的事情，所以我改寫了JS部分從頭開始：http://jsfiddle.net/d503n47r/2/

$('body').on('click','.toggle h3 a', function(e){ 
    e.preventDefault(); 
    if($(this).parents('.toggles').hasClass('accordion')) return false; 

    if ($(this).parents('.toggle').find('div').eq(0).hasClass('open')) { 
      $(this).parents('.toggle').find('div').eq(0).removeClass('open').slideUp(); 
    } else { 
      $('.toggle.open').removeClass('open'); 
      $(this).parents('.toggle').find('div').eq(0).addClass('open').slideDown(); 
    } 

});

請看看jQuery UI的，因爲它爲所有這些常見的東西提供了很多幫助http://jqueryui.com/（不需要重新發明輪子）

來源

2014-10-17 15:51:10

從零開始重寫零件是很棒的，但如果你沒有解釋一些你已經添加的東西，或許他們沒有看到它根本不會使原來的提問者受益。 – 2014-10-17 16:10:57

確定這是關閉...我只需要它關閉任何打開的切換，如果你點擊另一個切換並打開它...所以只有一個可以一次打開http://jsfiddle.net/d503n47r/8/ – joshdfw 2014-10-17 19:51:33

這很簡單，它爲什麼這樣做。你的函數總是執行slideUp和slideDown。以該順序。所以當你的div被摺疊時，它會執行slideUp（它不會真的做任何事情，因爲它已經被摺疊），然後它會滑落。現在，當div展開時：div將滑動（這次它上升，因爲它沒有摺疊），然後它會下降。

更好的方法是使用SlideToggle。

http://api.jquery.com/slidetoggle/

編輯：此外，還可以檢查DIV處於摺疊狀態還是不...

if($(element).is(':visible')){ 
    //expanded 
} else { 
    //collapsed 
}

來源

2014-10-17 16:01:02 MinusFour

MinusFour是正確的，這是兩個在同一時間發射。

解決此問題的一種方法是執行if/then語句來檢查它是否打開，然後根據該語句觸發打開/關閉。

Here's a link to a JSfiddle

我還添加了類「切換面板」到被滑動向上/向下的容器，只是讓下面會更容易閱讀。

if($(this).closest('.toggle').hasClass('open')){ 
     console.log('open'); 
     $(this).parents('.toggle').find('.toggle-panel').slideUp(300); 
     $(this).closest('.toggle').removeClass('open'); 
     return 
    } 
    else { 
     console.log('close'); 
     $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign'); 
     $(this).parents('.toggle').find('.toggle-panel').slideDown(300); 
     $(this).parents('.toggle').addClass('open'); 
    }

來源

2014-10-17 16:09:21

jquery切換將不會關閉點擊

回答

相關問題