.accordion（）菜单在其他div之前捕捉

时间：2013-06-06 14:56:21

标签： jquery html css

我的垂直菜单有问题，使用jQuery UI的.accordion（）函数制作。它会在我的水平菜单之前自动捕捉（当您点击“游戏”选项时，它应该打开此菜单）。如何设置它以使其保持在水平菜单后面？我已经尝试过调整z-index，但是如果设置为负nuber，它就会停止工作。但是它不会在水平菜单

之前捕捉

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>The Elder Scrolls V: Skyrim</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
        <body>

        <!--        Header      -->
        <a href="index.html"><div id="header">
            <img id="elderscrollslogo" src="elderscrollslogo.png">
            <img id="elderscrollstext" src="The_Elder_Scrolls.png">
        </div></a>
        <!--        xxx         -->


        <!--        Horizontal Menu         -->
        <div class="H-menu" id="glow">
            <div class="option" id="games">Games</div>
            <div class="option">Media</div>
            <div class="option">Items</div>
            <div class="option">News</div>
            <div class="option">Search</div>
            <div class="open"></div>
            <div class="option" id="settings">Settings
                <img id="gear" src="gear.png" />
            </div>
        </div>
        <!--        xxx         -->


        <!--        Vertical Menu           -->
        <div class="V-menu">
            <div class="accordionheader">DLC</div>
            <div class="option">
                <ul id="dlc">
                    <li>Dawnguard</li>
                    <li>Hearthfire</li>
                    <li>Dragonborn</li>
                </ul>
            </div>

            <div class="accordionheader">Armor</div>
            <div class="option">
                <ul id="dlc">
                    <li>Heavy Armor</li>
                    <li>Light Armor</li>
                    <li>Clothing</li>
                </ul>
            </div>

            <div class="accordionheader">Weapons</div>
            <div class="option">
                <ul id="weapons">
                    <li>Daggers</li>
                    <li>Maces</li>
                    <li>Swords</li>
                    <li>War Axes</li>
                    <br>
                    <li>Battleaxes</li>
                    <li>Greatswords</li>
                    <li>Warhammers</li>
                    <br>
                    <li>Bows</li>
                    <li>Arrows</li>
                    <li>Crossbows</li>
                    <li>Bolts</li>
                </ul>
            </div>          

            <div class="accordionheader">Items</div>
            <div class="option"></div>

            <div class="accordionheader">Quests</div>
            <div class="option"></div>

            <div class="accordionheader">NPC's</div>
            <div class="option"></div>

            <div class="accordionheader">Races</div>
            <div class="option"></div>

            <div class="accordionheader">Perks</div>
            <div class="option"></div>

            <div class="accordionheader">Skills</div>
            <div class="option"></div>

            <div class="accordionheader">Capital Cities</div>
            <div class="option"></div>

            <div class="accordionheader">Cities</div>
            <div class="option"></div>
        </div>
        <!--        xxx         -->


        <!--        Second Menus            -->
        <div id="containercontainer">

            <!--        Settings Menu           -->
            <div id="containersettings">
                <div class="s-o">Account</div>
                <div class="s-o">Privacy</div>
                <div class="s-o" id="last2">Logout</div>
            </div>
            <!--        xxx         -->

            <!--        Games Menu          -->
            <div id="containergames">

                <a href="LAT.html">
                    <div class="g-o">L.A.T.
                    <img class="imggames" src="LAT.jpg">
                </div>
                </a>

                <a href="arena.html">
                    <div class="g-o">Arena
                    <img class="imggames" src="arena.jpg">
                </div>
                </a>

                <a href="daggerfall.html">
                    <div class="g-o">Daggerfall
                    <img class="imggames" src="daggerfall.jpg">
                </div>
                </a>

                <a href="morrowind.html">
                    <div class="g-o">Morrowind
                    <img class="imggames" src="morrowind.jpg">
                </div>
                </a>

                <a href="oblivion.html">
                    <div class="g-o">Oblivion
                    <img class="imggames" src="oblivion.jpg">
                </div>
                </a>

                <a href="skyrim.html">
                    <div class="g-o">Skyrim
                    <img class="imggames" src="skyrim.jpg">
                </div>
                </a>

                <a href="online.html">
                    <div class="g-o" id="last1">Online
                    <img class="imggames" src="online.jpg">
                </div>
                </a>

            </div>
            <!--        xxx         -->
        </div>
        <!--        xxx         -->
    </body>
</html>

CSS：

html {
    background-image: url("carbon_background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cgoogleover;
}
body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
div div {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}



#header {
    height: 75px;
    width: 100%-10px;
    background-image: linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -o-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -moz-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -webkit-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -ms-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.21, rgb(61, 60, 61)), color-stop(0.68, rgb(110, 110, 110)));
    padding: 10px;
    z-index: 100;
}
#elderscrollslogo {
    height: 60px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    animation: rotate 5s linear infinite;
    -webkit-animation: rotate 5s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}


#elderscrollstext {
    width: 498px;
    height: 62.33333333px;
}
.H-menu {
    height: 25px;
    background-color: #3B5998;
    width: 100%;
    display: block;
    border-radius: 0px;
}
.H-menu .option {
    float: left;
    width: 15%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    list-style-type: none;
}
.H-menu .open {
    float: left;
    width: 10%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px;
    text-decoration: none;
    list-style-type: none;
}



.V-menu {
    position: absolute;
    background-color: #3B5998;
    width: 150px;
    display: block;
    border-radius: 0px;
    top: 120px;
}
.V-menu .option {
    float: top;
    width: 150px;
    text-align: center;
    background-color: #3B5998;
    color: white;
    font-size: 15px;
    text-decoration: none;
    list-style-type: none;
    border: black 1px solid;
}



#dlc    {
    list-style-type: none;
    margin: auto;
    float: left;
    vertical-align: middle;
}

#armor    {
    list-style-type: none;
    margin: auto;
    float: left;
    vertical-align: middle;
}

#weapons    {
    list-style-type: none;
    margin: auto;
    float: left;
    vertical-align: middle;
}



.accordionheader    {
    float: top;
    width: 150px;
    text-align: center;
    background-color: #7894CC;
    height: 25px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    list-style-type: none;
    border: black 1px solid;
}


#gear {
    width: 22px;
    height: 22px;
    margin-top: -2px;
}
#containercontainer {
    overflow: auto;
}



.s-o {
    list-style-type: none;
    color: white;
    background-color: #7894CC;
    opacity: 0;
    width: 15%;
    margin-top: 0px;
    text-align: center;
    font-size: 20px;
    float: right;
    clear: right;
}
.g-o {
    list-style-type: none;
    color: white;
    background-color: #7894CC;
    opacity: 0;
    width: 80px;
    margin-top: 0px;
    text-align: center;
    font-size: 18px;
    float: left;
    height: auto;
    border: #A3A3A3 solid 1px;
}
.imggames {
    width: 75px;
    height: 110px;
}
#last1 {
    border-bottom-right-radius: 10px;
}
#last2 {
    border-bottom-left-radius: 10px;
}


#search {
    float: left;
    margin-left: 60%;
    width: 15%;
    background-color: #7894CC;
}


#Text  {
    position: absolute;
    z-index: -1;

    width: 750px;
    height: auto;
    left: 200px;
    right: auto;
    border-radius: 15px;
    top:  175px;

    opacity: 0.9;

    background-color: #008080;

    text-align: center;
    color: #800000;
}

jQuery的/使用Javascript：

$(document).ready(function () {

    $("img").mousedown(function () {
        return false;
    });

    $(".s-o, .g-o").hide();

    $(".H-menu .option").mouseenter(function () {
        $(this).animate({backgroundColor: "#7894CC"});
    });
    $(".H-menu .option").mouseleave(function () {
        $(this).animate({backgroundColor: "#3B5998"});
    });

    $( ".V-menu" ).accordion({
        collapsible: true
    });


    $("#settings").click(function () {
        $(".s-o").show();
        $(".s-o").animate({
            opacity: 1.0
        });        
    });

    $("#containersettings").mouseleave(function () {
        $(".s-o").animate({
            opacity: 0
        }, function () {
            $(".s-o").hide();
        });
    });

    $("#games").click(function () {
        $(".g-o").show();
        $(".g-o").animate({
            opacity: 1.0
        });
    });
    $("#containergames").mouseleave(function () {
        $(".g-o").animate({
            opacity: 0
        }, function () {
            $(".g-o").hide();
        });
    });

});

的jsfiddle： http://jsfiddle.net/Fqc53/

1 个答案:

答案 0 :(得分：0)

您可以尝试将#containercontainer样式设置为

#containercontainer {
    overflow: auto;
    position: relative;
    z-index: 2;
}

这似乎将降落在手风琴前面？

jsFiddle

相关问题
最新问题