Question

我正在网站项目中使用jQueryUI，幻灯片效果在DIV中没有div（#sectionOverlay）。当我尝试在其中包含更多div的DIV中应用相同的问题时出现问题（当#btnClose被点击时，＃sectionInfo就会消失）

希望你能帮助我，问候！

HTML：

<div id="sectionCarrousel">

            <div class="carrousel_navigation" id="navPrev"></div>

            <div id="sectionProducts" class="imageflow"></div>

            <div class="carrousel_navigation" id="navNext"></div>

            <div id="sectionInfo">
                <img id="imgTitle" src="img/chips/1_name.png" alt="" />
                <a id="btnClose">
                    <img src="img/button_close.png" alt="" />
                </a>

                <div id="sectionDescription">
                    <p>PLACE HOLDER TEXT: consectetur adipiscing elit. Phasellus lacinia consequat enim. Suspendisse gravida pellentesque dui, sed commodo ligula auctor ut. Duis scelerisque vehicula neque, vel ultrices ipsum aliquam in. In eget erat id nulla elementum rutrum. Aliquam at est nibh, ac elementum est. Donec quis ligula vel ipsum vestibulum rutrum vel eget magna. Morbi ultricies convallis ultrices. Donec a urna eu augue mattis ullamcorper sit amet eget lectus. Praesent mauris dui, posuere eget dignissim at, cursus vitae mi. Suspendisse convallis lacinia ligula, vel porttitor arcu euismod at. Sed tincidunt massa in justo consequat ac feugiat risus ornare. Maecenas accumsan risus at dui hendrerit molestie. Proin eu eros nec diam dignissim consequat sit amet mollis ipsum. Vestibulum tincidunt ligula ac purus dictum porttitor.</p>
                </div>

                <div id="sectionShare">
                    <img src="img/txt_share.png" alt="" />
                    <a href="http://www.facebook.com/sharer.php?u=<?=URL?>" target="_blank">
                        <img src="img/icon_facebook.png" alt="" />
                    </a>
                    <a href="http://twitter.com/home?status=<?=TXT_TW_SHARE?> <?=URL?>" target="_blank">
                        <img src="img/icon_twitter.png" alt="" />
                    </a>
                </div>
            </div>

            <div id="sectionLogoBarcel"></div>
        </div>
    </div>
    <div id="sectionOverlay"></div>

CSS：

    #sectionCarrousel
{
    position: relative;
    top: 90px;
    height: 415px;
    /*width: 100%;*/
    /*min-width: 1280px;*/
    text-align: center;
    /*margin-bottom: 100px;*/
}

#sectionOverlay
{
    background-color: #260101;
    opacity: 0.8;
    z-index: 200;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#sectionInfo
{
    background-color: #4EA012;
    height: 300px;
    left: 230px;
    margin: 0 auto;
    position: relative;
    margin-top: -345px;
    width: 300px;
    z-index: 490;
    visibility: hidden;
}

JS：

function HideInfo()
{
    $("#sectionInfo").hide("slide", { direction: "right" }, 1000);

    $("#sectionOverlay").fadeOut(500);


//    blnOverlayVisible = false;
}

function changeInfo(id, force)
{
    if(force)
    {
        $("#sectionOverlay").fadeIn(500);
        blnOverlayVisible = true;
    }
    else
    {
        if(!blnOverlayVisible) return;
    }

    var description = "";

    $("#sectionInfo").fadeOut(function()
    {
        for(var i in products)
        {
            if(products[i].id == id)
            {
                description = products[i].description;
                break;
            }
        }

        $("#imgTitle").attr("src", "img/chips/" + id + "_name.png");
        $("#sectionDescription p").html(description);

        $(this).fadeIn().css("visibility","visible");
    });

$("#btnClose").click(HideInfo);

}

Answer 1

代码中有几个错误。让我们看看我们可以修复什么，然后从那里开始。 [编辑代码]在本地编辑和设置后，我看到的是一个空白屏幕。批准编辑后，在其中获取一些内容，包括按钮，我们将查看幻灯片问题。

JqueryUI“幻灯片”效果不起作用

1 个答案: