Question

所以我已经编写了所有HTML，将ID分配给将用作主体和幻灯片菜单的两个不同面板。但是当我添加jQuery时，它似乎没有响应。这与代码学院的使用有关，但没有其他任何东西。

HTML：

<body>
    <div ID="menu">
        <div ID="exit">
            <img src="http://www.thaddius.net/mems/hvit.jpg"/>
        </div>

        <ul>
            <li><a ID="Links" href="http://www.thaddius.net/soup.webm/">Suppe, ja?</a></li>
            <li><a ID="Links" href="http://www.thaddius.net/skjermavbildninger">Skjermdump?</a></li>
            <li><a ID="Links" href="https://www.youtube.com/watch?v=MC0hV3dea9g">Gotta go fast!</a></li>
            <li><a ID="Links" href="http://www.frankrobert.no">Men, Flørenes?</a></li>
            <li><a ID="Links" href="http://www.mjaavatten.no/">Men, Mjaavatten?</a></li>
            <li><a ID="Links" href="http://www.nittenbokstaverlang.com/">Men, Kristian?</a></li>
        </ul>
        <img src="http://www.thaddius.net/mems/longlast.jpg"
    </div></div>
    <div ID="body">
        <div ID="open">
            <img src="http://www.thaddius.net/mems/hvit.jpg"/>
            MENU
        </div>
    </div>




<script src="script.js"></script>
</body>

CSS：

#Links:hover{
    text-decoration: none;
    background-color: red;
    font-size: 110%;
}
#Links:link{
    font-weight: bold;
    text-decoration: none;
    color: white;
}
#Links:visited {
    text-decoration: none;
    font-weight: bold;
    color: white;
}
#menu {
    background-color: gray;
    padding: 8px;
    left: -288px;
    height: 100%;
    position: fixed;
    width: 272px;
}
li {
    border-bottom: 1px solid black;
    font-family: Comic sans MS;
    margin: left;
}
#exit {
    cursor: pointer
}
#open {
    display:inline-block;
    cursor: pointer;
    color: white;
    font-size: 30px;

}
body {
    background-color: black;

}

JS：

var main = function() {
    $('#open').click(function(){
        $('#menu').animate({left: '0px'}, 400);
        $('body').animate({left: '288px'}, 400);
    });
    $('#exit').click(function(){
        $('#menu').animate({left:'-288px'}, 400);
        $('body').animate({left:'0px'},400);
    });
}

$(document).ready(main);

Answer 1

好吧，让我们这样做。首先在您的head标记中加入jQuery的CDN版本：

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

首先，您需要开始兼容并在链接上删除这些相同的ID。您甚至不需要使用CSS来定位这些链接的属性。将#Links替换为#menu li a。这不会影响性能;毕竟CSS选择器仍然非常快。

<强> HTML

<div id="menu">
    <div id="exit">
        <img src="http://www.thaddius.net/mems/hvit.jpg"/>
    </div>

    <ul>
        <li><a href="http://www.thaddius.net/soup.webm/">Suppe, ja?</a></li>
        <li><a href="http://www.thaddius.net/skjermavbildninger">Skjermdump?</a></li>
        <li><a href="https://www.youtube.com/watch?v=MC0hV3dea9g">Gotta go fast!</a></li>
        <li><a href="http://www.frankrobert.no">Men, Flørenes?</a></li>
        <li><a href="http://www.mjaavatten.no/">Men, Mjaavatten?</a></li>
        <li><a href="http://www.nittenbokstaverlang.com/">Men, Kristian?</a></li>
    </ul>
    <img src="http://www.thaddius.net/mems/longlast.jpg" />
</div>
<div id="body">
    <div id="open">
        <img src="http://www.thaddius.net/mems/hvit.jpg" />
        MENU
    </div>
</div>

<强> CSS

#menu li a:hover{
    text-decoration: none;
    background-color: red;
    font-size: 110%;
}
#menu li a:link{
    font-weight: bold;
    text-decoration: none;
    color: white;
}
#menu li a:visited {
    text-decoration: none;
    font-weight: bold;
    color: white;
}
#menu {
    background-color: gray;
    padding: 8px;
    left: -288px;
    height: 100%;
    position: fixed;
    width: 272px;
}
#menu li {
    border-bottom: 1px solid black;
    font-family: Comic sans MS;
    margin: left;
}
#exit {
    cursor: pointer
}
#open {
    display:inline-block;
    cursor: pointer;
    color: white;
    font-size: 30px;
}


/* Animate any left property value change */
#body, #menu {
    /* Add vendor prefixes too if you're not pre-compiling your stylesheet */
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -ms-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    /* This is the standard declaration */
    transition: left 0.5s ease-in-out;
}
/* Toggle menu open */
body.menu-open #menu{
    left: 0;
}
body.menu-open #body{
    left: 288px;
}

<强>的Javascript 当用户点击切换时，这将切换body元素上的类menu-open。

$(function(){
    var $toggles = $('#open, #exit'), $body = $('body');
    $toggles.bind('click', function(){ $body.toggleClass('menu-open'); });
});

Here's a working fiddle

我试图用jQuery创建一个滑入式菜单

1 个答案: