jQuery手風琴-style =“ display：none;-停止javascript

Question

我正在使用手風琴樣式的html代碼

<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>

這個jQuery腳本

$(function(){
    $('.blog .accordion-link').click(function(){
        if(!$(this).hasClass('accordion-on'))
        $('.blog .accordion-link').removeClass('accordion-on');
        $(this).toggleClass('accordion-on');
        $(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
    })
});

在第一個手風琴標簽中，我使用的是fotorama幻燈片。

我面臨的問題是，'style =“ display：none;' 中斷/停止幻燈片的顯示，切換手風琴后如何使用幻燈片？

問候彼得

Answer 1

嘗試從那里刪除內聯樣式，並添加一個包裹所有內容的父<div> ，然后從那里而不是在手風琴本身上控制slideToggle。

<div class="acc">
  <div class="accordion-link">Link</div>
  <div class="accordion-panel" style="display:none;">content</div>
</div>

另外我不知道你是什么if是，但你可以使用toggleClass()

Answer 2

冰雹瑪麗猜

嘗試：

<div class="accordion-panel"style="visibility:hidden;">content</div>

我認為插件正在嘗試操縱該CSS。

你有演示可以看嗎？ 我也許可以給出更好的答案。

Answer 3

 $(function(){ $('.accordion-link').click(function(){ if(!$(this).hasClass('accordion-on')) $('.accordion-link').removeClass('accordion-on'); $(this).toggleClass('accordion-on'); $(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle(); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion-link">Link</div> <div class="accordion-panel" style="display:none;">content</div> <div class="accordion-link">Link2</div> <div class="accordion-panel" style="display:none;">content2</div> <div class="accordion-link">Link3</div> <div class="accordion-panel" style="display:none;">content3</div> 

我沒有發現您的代碼有任何錯誤

Answer 4

我刪除了內聯樣式“ display：none”，並在jQuery腳本中添加了這一行代碼

$('.accordion-panel').css('display','none');

這有助於fotorama初始化和啟動-但是圖像尺寸錯誤。

將這行代碼添加到click（函數）

$(window).trigger('resize');

解決了問題。 現在可以了。