6

最初は、ユーザーがリンクをクリックして開くまで、flexslider を非表示にしています。しかし、何らかの理由で、スライダーが表示された後、ブラウザー ウィンドウを調整するまで動作しません。これは奇妙なことです。flexslider を非表示にしないと、正常に動作します。以下は、Flex スライダーを開閉するために使用する CSS、HTML、および jquery です。フレックススライダーに精通していて、なぜこれが起こっているのか知っている人はいますか? ありがとうございました！

CSS

section#hotspots .dropdown-area {   
    width: 100%;
    float: left;
    display: none;
}

HTML

<h1>Hot Spots <span class="toggle-button"></span></h1>

<section class="dropdown-area">
    <div class="flex-container">
        <div class="flexslider" id="secondary-slider">
            <ul class="slides">
                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-1.jpg"></li>

                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-2.jpg"></li>

                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-3.jpg"></li>
            </ul>

            <ul class="flex-control-nav">
                <li>
                    <a href="">LOLA COFFEE</a> /
                </li>

                <li>
                    <a href="">PUBLIC MARKET CAFE</a> /
                </li>

                <li>
                    <a href="">MATT'S BIG BREAKFAST</a> /
                </li>
            </ul>
        </div><!--End Flexslider-->
    </div><!--End Flex-container-->
</section>

JS

$(window).load(function() {
$("#hotspots .toggle-button").click(function() {
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
});
});
4

3 に答える 3

2

私にとっては、アコーディオン/折りたたみのクリックイベントで.flexsliderのサイズを変更しました

$('.acordeon-trigger').click(function () {
     // here all your accordion stuff
     $('.flexslider').resize(); // this is it
});
于 2016-05-13T00:50:35.950 に答える
2

最新バージョンの flexslider を使用していると仮定します。その場合、より効率的な setup() を使用できます。また、.toggle-button の最初のクリックで setup() 関数を実行する別のイベントを作成します。

このようなもの：

$toggleButtons = $('#hotspots .toggle-button');

//execute once, then remove this event
$toggleButtons.on('click.flexSetup', function() { 
   $('.flexslider').data('flexslider').setup();
   //remove this click event
   $toggleButtons.off('click.flexSetup');
});

//your regular click events
$toggleButtons.on('click', function() { 
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
});

もちろん、迅速で汚い解決策が必要な場合は、flexslider を非表示にする代わりに絶対配置を使用できます。

section#hotspots .dropdown-area {  
   position: absolute; left: -10000px;
}

そして、フレックススライダーを「表示」したい場合は、位置と左のプロパティをデフォルトの css 値に設定するだけです。（position: static＆left: autoあなたの場合）

于 2014-07-03T09:51:12.677 に答える
1

これは、flexslider がページの読み込み時に初期化されたが、コンテンツが非表示になっているために発生します。したがって、トグルクリックでflexsliderを初期化するだけで済みます：

$(window).load(function() {
  var fs_init = 0; //init var
  $("#hotspots .toggle-button").click(function () {
      $("#hotspots .dropdown-area").slideToggle("slow");
      $("#hotspots span").toggleClass("toggle-button close");
      if (fs_init == 0) {fs_init++; //to prevent other initializations
        $('.flexslider').flexslider({
            animation: "slide" //enter you params here
        });            
      }
  });
});

注：onLoadではなく、トグルイベントからのみ、スライダーを2回初期化しないでください

于 2014-06-30T06:16:36.743 に答える