JavaScript似乎没有激活HTML元素

Question

I'm trying to make my HTML body move left when I click on the menu logo, but that doesn't seem to work through jQuery... I have played with the scripts' locations in the top of the page, and that doesn't seem to be the problem. 当我单击菜单徽标时，我试图使我的HTML主体向左移动，但这似乎不适用于jQuery ...我已经在页面顶部播放了脚本的位置，但这并没有似乎不是问题。

This is my HTML: 这是我的HTML：

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>final project</title>

<link rel="stylesheet" type="text/css" href="css/final-fix.css">
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

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

</head>

<body>
    <div class="container-box">
        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="navigation"><a href="#">Home</a></li>
                <li role="navigation"><a href="#">About Us</a></li>
                <li role="navigation"><a href="#">Contact Us</a></li>
            </ul>
            <ul ul class="nav nav-pills pull-left">
                <li role="menu"><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span></li>   
            </ul>   
        </nav>

        <header></header>

                <div class="main" id="grad"><h1>Welcome to ducati</h1>

            <div class="cover-div">

                <div class="box"  id="box1">
                <span class="glyphicon glyphicon-headphones"></span>
                <p>Lorem ipsum </p>
                </div>

                <div class="box"  id="box2">
                <span class="glyphicon glyphicon-music"></span>
                <p>Lorem ipsum </p>
                </div>
                <div class="box"  id="box3">
                <span class="glyphicon glyphicon-download-alt"></span>
                <p>Lorem ipsum   </p>
                </div>
                <div class=" box"  id="box4">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                <p>Lorem ipsum </p>
                </div> 
            </div>

        </div>

        <footer> &copy; All right belong to me :) </footer>
    </div>
</body>
</html>

This is my CSS: 这是我的CSS：

* {
    margin: 0;
    padding: 0;
    font-family: arial;
}
.container-box{
position:relative;
        margin: 0 auto; 
        width:600px;
        height:570px;
        border:2px solid black; 
}
.pull-right {
    /* font-weight:bold;  */

}
header {

    background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
    height:30%; 
    width:100%;
    background-position: center center;

}
.main h1{
    text-align:center;
    margin:auto;
}
.main span{
    text-align:center;
    font-size:30px;
    margin-top:10px;
}
 .main{
    position: relative;
    height: 60%;
    border-bottom:2px solid black;
    text-align:center;  
}
#grad {
  background: -webkit-linear-gradient(left top, gray,gray,red,gray,white ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, gray,gray,red,gray,white); /* Standard syntax */
} 


footer {
    background-color:gray;


}
.box{

    width: 20%;
    border: 1px solid black;
    margin:2.5%;
    height: 50%;
    border-radius:15px;
    color:purple;
    font-weight:bold;
}
.cover-div{

    width:100%;
    margin:0 auto;

}

#box1{
float:right;
/* margin-left:170px; */
background-image:linear-gradient(
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1)
    ),url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2YZ8vH8ya8CmAfxdelGL1Yg2H9wnubKmiMjTfa_-oUyWMBJrsg');
}

#box2{
float:right;
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}
#box3{
float:right;
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}
#box4{
float:right;
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}

.glyphicon{
color: red;
}

And this is my JavaScript: 这是我的JavaScript：

var main = function () {

    $('.glyphicon-menu-hamburger').click(function () {
        $('.container-box').animate({
            left: "285px"
        }, 200);
    });


    $(document).ready(main);
};

Answer 1

Put a comment inside of main, you'll see it's not getting called most likely. 在main内添加评论，您会发现它不太可能被调用。

It looks like you are making the call to document ready inside of the declaration for main. 看来您正在main声明中进行文档准备就绪的调用。 Meaning it will never get called. 意味着它永远不会被调用。

JavaScript似乎没有激活HTML元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-25 22:58:31

JavaScript似乎没有激活HTML元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-25 22:58:31

解决方案1
0 已采纳 2015-05-25 22:58:31