javascript - 显示/隐藏和 slider 冲突

Question

几天前，我问了一个有关显示/隐藏 div 脚本的问题，我遇到了问题。

JS show/hide default behavior

测试了所有解决方案，但似乎没有任何解决方案在我的网站上起作用(它们都在 fiddle 或网站的不同区域中工作，而不是我需要的区域)。问题是在显示/隐藏 div 内我有一个 slider 。有 4 个选项卡，每个选项卡显示不同的 slider 。我最好的猜测是，出现问题是因为 slider 和显示/隐藏都使用相同的显示:无，从而更改了 slider 的内容。

这是我目前用于显示/隐藏的 JS:

window.addEventListener("hashchange", function () {
    var targetDiv = $(location.hash);
    if (!targetDiv.is(':visible')) {
        $('.page1').slideUp();
        targetDiv.slideDown();
    } else {
        $('.page1').slideUp();
    }
}, false);

我使用的 slider 称为 Flickity，它的链接是； https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.js

直播网站链接为: http://theworkshop.ro/astra3/

这是显示/隐藏的 fiddle :http://jsfiddle.net/s9cxjrmf/ (目前 .page css 被注释为显示所有 4 个显示 slider ，如果我添加不显示，因为它在 fiddle 中，它将不再工作，它只显示 slider 的箭头，而不显示其内容)

问题出在网站的“工作”部分。

我困扰了几天，知道如何解决这个问题吗？

Answer 1

尝试使用此代码，它将隐藏 #work_box 内的所有 div，并再次显示第一个 div，这样运行用于隐藏和显示 div 的脚本将起作用，希望这会对您有所帮助。

  $( document ).ready(function() {
        $( "#work_box div" ).each(function() {
           $( this ).css( "display", "none" );
        });

        $( "#work_box div" ).first().css( "display", "block" );

        $('#work_box div').first().find(':hidden').each(function(){
           $(this).show();
        });
    });

这适用于您需要重复此操作的第一个 div。

$('#work_box div').first().find(':hidden').each(function(){
    $(this).show();
});

当用户点击电影、电视节目等其他链接时的其他 div。