jQuery - 使用內容在div上方切換幻燈片

Question

我有一個“菜單”和一個切換菜單的“圖像”。 （僅供參考，我沒有使用jQuery Mobile，我已經嘗試了，它搞砸了一切）。 因此我正在創建自己的“滑動菜單”。

唯一真正的問題是它滑過我的“圖像”，而不是我的content-div。 它把它推到一邊，我似乎無法解決這個問題。 我想讓我的“菜單”滑過所有div，實際上是在所有內容之上。

HTML

---

<div class="menuopties">
    <div id="menu">
        <ul>
            <li>Hello World</li>
            <li>This is me</li>
            <li>Saying hi</li>
            <li>To You</li>
        </ul>
    </div>
    <div id="content">
        <div id="image"></div>
        <div class="innercontent">Some content</div>
    </div>
</div>

CSS

---

#image {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}
#menu {
    height: 200px;
    width: 200px;
    background-color: lightblue;
    float: left;
    display: none;
}
.menuopties {
    float: left;
}
#content {
    height: 500px;
    width: 500px;
    background-color: lightgreen;
}
.innercontent {
    background-color: pink;
}

jQuery的

---

$("#image").click(function () {
    $("#menu").toggle("slide");
});

$("#menu").click(function () {
    $("#menu").toggle("slide");
});

演示

有人可以幫幫我嗎？

Answer 1

將其添加到您的代碼position:absolute;left:0;top:0;

 $("#image").click(function () { $("#menu").toggle("slide"); }); $("#menu").click(function () { $("#menu").toggle("slide"); }); 

 #image { height: 50px; width: 50px; background-color: lightgray; } #menu { height: 200px; width: 200px; background-color: lightblue; display: none; position:absolute; left:0; top:0; } .menuopties { float: left; } #content { height: 500px; width: 500px; background-color: lightgreen; } .innercontent { background-color: pink; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="menuopties"> <div id="menu"> <ul> <li>Hello World</li> <li>This is me</li> <li>Saying hi</li> <li>To You</li> </ul> </div> <div id="content"> <div id="image"></div> <div class="innercontent">Some content</div> </div> </div>