Question

我添加了一些javascript来设置登录动画，同时在图片中滑动。

我尝试了JS Fiddle中的代码，它就像一个魅力，但如果我将代码复制粘贴到Chrome或Internet Explorer，则没有任何反应。

两种浏览器都启用了Javascript。

HTML：主页

<body>
<header>
    <div class="Header">
        <nav id="navi">
            <img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
            <img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>

            <ul>        
            <li> <a class="navlinks" href="#">Home</a> </li>
            <li> <a class="navlinks" href="#">About us</a> </li>
            <li> <a class="navlinks" href="#">Our Services</a> </li>
            <li class="last" id="login"> <a href="#">Login</a>
                <div class="dummy">
                <ul>
                <li  class="loginform"> <form method="post" action="">
                  <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
                  <p><input type="password" name="password" value="" placeholder="Password"></p>
                  <p class="remember_me">
                     <label>
                      <label>
                   <input type="checkbox" name="remember_me" id="remember_me">
                           Remember me on this computer
                      </label>
                      </label>
                     </p>
                      <p class="submit"><input type="submit" name="commit" value="Login"></p>
                    </form>
                    </li>
                </ul>
                </div>
            </li>


            </ul>           
            </li>

        </nav>  
    </div>
</header>
</body>
</html>

CSS：

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

body {
    margin: 0;
    background: #808080 ;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #fff; 
}

.show {
    display: none;
}

.logo{
width: 200px;
height: 100px;
z-index: 11;
margin-left: -100px;
}

.menu-icon {
    padding: 25px 0 0 10px;
    display: none;
    width: 100px;
    height: 100px;
    float: left;
    z-index: 14;
}

#navi {
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    text-align: center;
    background: rgba(0,0,0,0.7);
}

nav :hover {
    background: #2CB4AC;
    transition: background 0.6s ease-out;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    display: inline;
}

nav > ul > li > a {
    padding: 15px 70px;
    margin: 0 -3px;
    display: inline-block;
    color: white;
    font-size: 1.2em;
    font-style: bold;
    text-decoration: none;
    transition: color 0.3s ease-in-out; 
}

.navlinks {
    border-left: 3px solid rgba(255,255,255,0.3);
}

nav li a:hover {
    color: black;
    border-color: #2CB4AC;
}

nav li a:active {
    transform: translateY(1px);
}

nav > ul > li > ul {
  display: none;
}

nav > ul > li:active > ul {
  display: block;
  align: center;
}

.last a{
    border-right: 3px solid rgba(255,255,255,0.3);
    border-left: 3px solid rgba(255,255,255,0.3);
}

.logo {
    width: 200px;
    height: 100px;
    background: url('C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png') no-repeat;
}


@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }


    header {

        position: absolute;

    }

    nav ul, nav:active ul { 

        display: none;
        position: fixed;
        background: rgba(0,0,0,0.7);
        border: none;
    }

    #navi li a:first-child {
    border-left: none;
}

.menu-icon {
    display: inline-block;
    background: rgba(0,0,0,0);
}

#last a{
    border-right: none;
}

    nav li {
        font-size: 2.5em;
        text-align: center;
        width: 100%;
        margin: 0;
        display: block;
    }

    nav:hover ul {

        display: block;
    }

.logo{
    width: 300px;
    height: 150px;
    z-index: 11;
    margin-left: -100px;
}

#navi :hover {
    background: #2CB4AC;
    transition: background 0.4s ease-out;
}

和Javascript：

$(".last").on('click', function() {
  $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
  e.stopPropagation();
});

这里是小提琴。请点击登录按钮，它将改变其位置。

https://jsfiddle.net/5vs30x6f/

Answer 1

你必须将你的jQuery代码包装在

中

$( document ).ready(function() {
  // Your code goes here
});

您可以阅读更多here。通常，只要DOM层次结构已完全构建，脚本就可以运行

所以你的代码将是：

$( document ).ready(function() {
  $(".last").on('click', function() {
    $('li div ul').toggle('');
  });
  $('.nav > li div ul li a').click(function(e) {
    e.stopPropagation();
  });
});

并在头部添加jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

我很确定你忘了添加window.onload监听器，因为这是使用JSFiddle执行代码与纯Javascript之间的唯一区别，因为JSFiddle会在加载jQuery时自动执行代码。你应该这样做：

window.addEventListener('load', function(){
    // Your code
});

或者您可以使用jQuery：

$(document).ready(function(){
    // Your code
});

Answer 3

你错过了这个

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

$(".last").on('click', function() {
  $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
  e.stopPropagation();
});

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

body {
    margin: 0;
    background: #808080 ;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #fff; 
}

.show {
    display: none;
}

.logo{
width: 200px;
height: 100px;
z-index: 11;
margin-left: -100px;
}

.menu-icon {
    padding: 25px 0 0 10px;
    display: none;
    width: 100px;
    height: 100px;
    float: left;
    z-index: 14;
}

#navi {
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    text-align: center;
    background: rgba(0,0,0,0.7);
}

nav :hover {
    background: #2CB4AC;
    transition: background 0.6s ease-out;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    display: inline;
}

nav > ul > li > a {
    padding: 15px 70px;
    margin: 0 -3px;
    display: inline-block;
    color: white;
    font-size: 1.2em;
    font-style: bold;
    text-decoration: none;
    transition: color 0.3s ease-in-out; 
}

.navlinks {
    border-left: 3px solid rgba(255,255,255,0.3);
}

nav li a:hover {
    color: black;
    border-color: #2CB4AC;
}

nav li a:active {
    transform: translateY(1px);
}

nav > ul > li > ul {
  display: none;
}

nav > ul > li:active > ul {
  display: block;
  align: center;
}

.last a{
    border-right: 3px solid rgba(255,255,255,0.3);
    border-left: 3px solid rgba(255,255,255,0.3);
}

.logo {
    width: 200px;
    height: 100px;
    background: url('C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png') no-repeat;
}


@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }


    header {

        position: absolute;

    }

    nav ul, nav:active ul { 

        display: none;
        position: fixed;
        background: rgba(0,0,0,0.7);
        border: none;
    }

    #navi li a:first-child {
    border-left: none;
}

.menu-icon {
    display: inline-block;
    background: rgba(0,0,0,0);
}

#last a{
    border-right: none;
}

    nav li {
        font-size: 2.5em;
        text-align: center;
        width: 100%;
        margin: 0;
        display: block;
    }

    nav:hover ul {

        display: block;
    }

.logo{
    width: 300px;
    height: 150px;
    z-index: 11;
    margin-left: -100px;
}

#navi :hover {
    background: #2CB4AC;
    transition: background 0.4s ease-out;
}

＆＃13;

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="Header">
        <nav id="navi">
            <img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
            <img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>

            <ul>        
            <li> <a class="navlinks" href="#">Home</a> </li>
            <li> <a class="navlinks" href="#">About us</a> </li>
            <li> <a class="navlinks" href="#">Our Services</a> </li>
            <li class="last" id="login"> <a href="#">Login</a>
                <div class="dummy">
                <ul>
                <li  class="loginform"> <form method="post" action="">
                  <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
                  <p><input type="password" name="password" value="" placeholder="Password"></p>
                  <p class="remember_me">
                     <label>
                      <label>
                   <input type="checkbox" name="remember_me" id="remember_me">
                           Remember me on this computer
                      </label>
                      </label>
                     </p>
                      <p class="submit"><input type="submit" name="commit" value="Login"></p>
                    </form>
                    </li>
                </ul>
                </div>
            </li>


            </ul>           
            </li>

        </nav>  
    </div>
</header>

＆＃13;

Javascript在JSfiddle中工作但在Chrome或IE中没有

3 个答案: