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();
    })
});

在第一个手风琴标签中，我使用的是照片幻灯片。

我面临的问题是'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');

解决了问题。现在可以了。

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

4 个答案: