Question

我正在尝试使用Flexslider，我无法将Flexslider包装在另一个div中，隐藏它，然后在单击按钮时尝试显示整个div。我没有使用AJAX调用加载滑块或任何其他div，而是（因为网站相对简单和小）使用JQ隐藏，然后在点击按钮时显示内容。

**//This is the JQuery I've tried using**
<script type="text/javascript" charset="utf-8">
$('#projectsPage').hide();
$('#projectsLink').click(function(){
$('#projectsPage').fadeIn(1000).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    slideshow: true,
    animationLoop: true,
    animationSpeed: "3000",
    slideshowSpeed: "8000",
    controlNav: false,
    directionNav: false
  });
});
});
</script>

**<!-- HTML-->**

<!--Click this link to show the div containing the flexslider-->
<a href="#projectsPage" id="projectsLink">link</a>

<!--Div containing the flexslider div (which is part of the source code)-->
<div id="projectsPage">
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="js/flexslider/images/img2.jpg" />
    </li>
    <li>
      <img src="js/flexslider/images/img3.jpg" />
    </li>
    <li>
     <img src="js/flexslider/images/img4.jpg" />
   </li>
 </ul>
</div>
</div>

此代码是更宏大的文档的一部分，但并不是那么复杂。有人能告诉我，如果我破坏了某些东西或需要包含更多信息吗？

此外，JS控制台似乎没有错误，所以我很难理解它为什么不显示。它“加载”#projectsPage div，如URL中所示，但随后在窗口中不显示任何内容。

我对JQuery很陌生，所以要好好：）

谢谢！

Answer 1

滑块无法初始化隐藏的div内部。

我有同样的问题隐藏了div中的多个flexsliders，只有在点击缩略图时才会显示。要使其工作，请在元素上设置一个jquery click（）侦听器，该侦听器将导致滑块显示，并在包含div被取消隐藏后初始化滑块。

如下所示：

$('.show_slider_link_class').click( function(){

    //show containing element
    $('.hidden_slider_container').show();

            // now you can init the flexslider
    $('.flexslider_').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        minItems: 1,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
});

无法加载/显示Flexslider

1 个答案: