0

WebサイトプロジェクトでjQueryUIを使用していますが、スライド効果は、内部にdivがないDIVでも正常に機能します（#sectionOverlay）。より多くのdivが含まれているDIVに同じものを適用しようとすると、問題が発生します（#btnCloseがクリックされると、＃sectionInfoが消えます）

http://jsfiddle.net/fB4bw/

よろしくお願いします！

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);

}

4

1 に答える 1

0

コードにいくつかのエラーがあります。何を修正できるか見てみましょう。[コードを編集] ローカルで編集および設定した後、空白の画面しか表示されません。編集が承認されたら、ボタンを含むいくつかのコンテンツを取得し、スライドの問題を見ていきます。

于 2013-03-04T19:43:33.640 に答える