在jQuery中的附加事件

我有一個簡單的jQuery手風琴，它可以切換具有滑動效果的CSS類（顯示，隱藏）。我想刪除CSS父類div與CSS類moduletable（從padding-bottom：40px到padding-bottom：0）切換時發生，但到目前爲止我沒有成功。在jQuery中的附加事件

這是CSS代碼：

body { 
    width: 300px; 
    font-family: Arial; 
    padding: 20px; 
} 
.moduletable { 
    padding-bottom: 40px; 
    background: #f5f5f5; 
} 
.accordion .module-title h3 { 
    color: #930042; 
    font-size: 1.5em; 
    margin-bottom: 0.45em; 
    margin-top: 1.6em; 
    background: url(http://imageshack.us/a/img7/4521/hideoy.png) no-repeat right center transparent; 
    cursor: pointer; 
} 
.accordion .module-title h3.show { 
    background: url(http://imageshack.us/a/img818/6398/showw.png) no-repeat right center transparent; 
}

這是HTML代碼：

<article class="moduletable accordion" id="module-175"> 
    <header class="module-title"> 
    <h3>Categories</h3> 
    </header> 
    <section class="module-content"> 
    <div class="custom accordion"> 
     <ul> 
     <li> 
     <a href="#">Events</a> 
     </li> 
     <li> 
     <a href="#">Shows</a> 
     </li> 
     </ul> 
    </div> 
    </section> 
</article>

這是jQuery代碼：

$('.accordion .module-title h3').click(function() { 
    $(this).toggleClass('show'); 
    $(this).parent().next('.module-content').slideToggle({duration:500}); 
});

你可以看到她的工作例子E：http://jsfiddle.net/esedic/NQHax/

來源

2012-10-22 weezle

http://jsfiddle.net/esedic/NQHax/是ü想要什麼\ –

你發佈一個鏈接到原來的jsfiddle？，我沒有看到任何改變。無論如何，@Curt發佈了一個工作解決方案。 – weezle

你可以使用toggleClass()：

$('.accordion .module-title h3').click(function() { 
    $(this).toggleClass('show'); 
    $(this).parents(".moduletable").toggleClass("nopadding"); 
    $(this).parent().next('.module-content').slideToggle({duration:500}); 
}); 

.moduletable.nopadding { 
    padding-bottom: 0; 
}

http://jsfiddle.net/NQHax/1/

來源

2012-10-22 09:11:59 Curt

謝謝，這很好！我發現了另一個問題。當我用CSS class模塊切換CSS class show/hide部分時，內容獲取內聯樣式overflow：hidden和display：block。由於我原本在本節內有下拉菜單，所以會因爲溢出而被切斷：隱藏。如果我簡單地向模塊內容添加.attr（'style'，'display：block; overflow：visible;'），那麼手風琴的效果表現很奇怪，你可以在這裏看到它：http://jsfiddle.net/esedic/ NQHax/2 /。你能提出解決這個問題的辦法嗎？ – weezle

在jQuery中的附加事件

回答

相關問題