0

我有一个 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;修复了它，但在页面加载时将滑块留在了下方。

4

1 回答 1

1

破解它：

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

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

然后通过将高度更改为 500 在 js 中显示它，使您的 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");但是您不需要这些，因为关闭面板链接在不向下滚动的情况下可见。

于 2010-10-17T11:13:56.307 回答