显示/隐藏和滑块冲突 [英] Show/hide and slider conflict

问题描述

几天前，我问了一个有关我遇到问题的show/hide div脚本的问题.

A few days ago I asked a question regarding a show/hide div script that I had problems with.

JS显示/隐藏默认行为

测试了所有解决方案，但似乎在我的网站上没有任何工作(它们都在我需要的地方摆弄或摆在网站的不同区域中).问题是在show/hide div里面我有一个滑块.有4个标签，每个标签显示一个不同的滑块.我最好的猜测是，出现此问题是因为滑块和显示/隐藏都使用相同的显示:无，从而改变了滑块的内容.

Tested all the solutions and nothing seemed to work on my website (they all work in fiddles or different areas of the website than the one I need it in). The problem is that inside the show/hide divs I have a slider. There are 4 tabs, each showing a different slider. My best guess is that the problem appears because both the slider and the show/hide use the same display:none, altering the slider's content.

这是我目前用于表演/隐藏的JS:

Here's the JS that I currently have for the show/hide:

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

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

The slider I use is called Flickity and it's link is; https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.js

实时网站的链接为: http://theworkshop.ro/astra3/

The link of the live website is: http://theworkshop.ro/astra3/

以下是显示/隐藏的小提琴: http://jsfiddle.net/s9cxjrmf/(目前.page css已被注释为显示所有4个show滑块，如果我在小提琴中不添加任何显示，它将不再起作用，它仅显示滑块的箭头，而不是内容)

Here's the fiddle of the show/hide: http://jsfiddle.net/s9cxjrmf/ (currently the .page css is commented to show all 4 show sliders, if I add display none as it is in the fiddle it doesn't work anymore, it only shows the arrows of the slider, not it's content)

问题出在网站的工作"部分.

The problem is in the Work section of the website.

我挣扎了几天，知道如何解决这个问题吗?

I'm struggling for a few days, any idea how to solve this problem?

推荐答案

尝试使用此代码，它将所有div隐藏在#work_box内，并再次显示第一个以隐藏和显示div的方式运行的脚本希望对您有帮助.

Try with this code it will hide all the div inside the #work_box and again displays the first one that way the script running for hiding and showing the div will work hope this will help you.

  $( 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.

This is working for the first div you need to repeat this.

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

对于其他div，当用户单击电影，电视节目等其他链接时.

for other div when user click on the other links like films,tv_shows etc.

这篇关于显示/隐藏和滑块冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！