如何将手风琴与旋转木马同步？

我正在使用两个同步在一起的猫头鹰传送带在下面有一个主图像和缩略图。我正在使用这个pen的代码。如何将手风琴与旋转木马同步？

我在页面上也有一个手风琴。我现在需要将手风琴与缩略图同步，让它们以双向方式工作，如果我点击手风琴，缩略图就会变得活跃，如果点击缩略图，手风琴就会打开。

我有一个演示here。

我添加选择到这两个：

缩略图猫头鹰旋转木马

$i = 1; 

$html_out .= '<div class="item thumb" data-flavor="' . $i++ . '">'; 
    $html_out .= '<img class="slide-img-thumb" src="' . $slide . '" style="background: no-repeat center center; background-size: cover;" />'; 
$html_out .= '</div>';

手风琴

$i = 1; 
$html .= '<div class="x-accordion-heading">'; 
    html .= '<a class="x-accordion-toggle collapsed hvr-bounce-to-right" data-flavor="' . $i++ . '" data-cs-collapse-toggle="" data-cs-collapse-parent="#flavour-accordion">' . $title . '</a>'; 
$html .= '</div>';

从每一件事情的主要外卖是，它们都具有data-flavor='1'和增加到2,3,4等

我该如何正确同步这两个？

来源

2017-06-05 Darren Bachan

嗨，我一直在寻找到你的代码，你为什么从thumbnai – DASH

@DASH'数据删除味味基准=“”'现在就在现场我不确定要制作什么选择器。在缩略图之前有'数据散列'和手风琴有一堂课。 –

试试这个：

jQuery("#sync1").on('changed.owl.carousel', function(e) { 
//Added the timeout so that transition completes in that time 
setTimeout(function(){ 
    var cEl = jQuery("#sync2 .owl-item.active.current"); 
    var item = cEl.children('.item'); 
    var flavor = Number(item.data('flavor'));  
    if(!isNaN(flavor)){ 
     var el = jQuery("[data-cs-collapse-toggle]").filter("[data-flavor='" + flavor + "']"); 
     if(el.length > 0){ 
      el.trigger('click'); 
     }   
    } 
}, 100); 
})

来源

2017-06-05 19:12:06 DASH

这感觉很接近，'data-flavor =“1”'正在用'data-flavor =“4”'打开手风琴。尽管如此，手风琴没有让大拇指活跃起来。 –

你可以把100毫秒的超时功能的身体，就像我在答案 – DASH

有一个错误的地方，控制台说语法错误。 –

如何将手风琴与旋转木马同步？

回答

相关问题