Question

我有一个jQuery滑动面板，它没有在其中显示jQuery轮播。

示例：http://www.warface.co.uk/clients/warface.co.uk/

单击显示仪表板以显示滑动面板。

我有按钮（上一个/下一个）显示但不是旋转木马。我还在下面添加了旋转木马。

我有滑动面板的CSS

#panel {
    width: 100%;
    height: 500px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
}

似乎删除display: none;修复了它，但在页面加载时将滑块停止。

Answer 1

破解它：

您需要使用高度而不是显示来隐藏面板，如下所示：

#panel {
    width: 100%;
    height:0px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    }

然后通过将高度更改为500来显示它，使JS成为这样：

$(document).ready(function() {

    // Expand Panel
   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "500px"},"slow");
    });    

    // Collapse Panel
    $("#close").click(function(e){
        e.preventDefault();
        $("div#panel").animate({height: "0px"},"slow");
    });     

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  

     $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });

});

注意preventDefault（）的附加内容，它阻止页面跳到顶部，这在我在jsfiddle中尝试时是必要的，但在实时应用程序中不需要prob，但通常是好的做法。如果你想看到它的实际效果你可以在这里这样做：http://jsfiddle.net/LiamBailey/ERQzd/87/注意：由于jsfiddle中的窗口大小有限，你必须向下滚动才能进入关闭面板链接，这样你就看不到面板滑动了因为preventDefault备份，为了解决这个问题，我添加了一点向上滚动$("html,body").animate({scrollTop: target},"fast");但是你不需要这些，因为关闭面板链接是可见的而不向下滚动。

jCarousel图像不显示在jQuery滑块中

1 个答案: