Javascript 在 JSfiddle 中工作，但在 Chrome 或 IE 中不工作

标签 javascript html css jsfiddle

我添加了一些 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();
});

这是 fiddle 。请点击登录按钮，它会改变它的位置。

https://jsfiddle.net/5vs30x6f/

最佳答案

你错过了这个

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


$(".last").on('click', function() {
  $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
  e.stopPropagation();
});
@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;
}
	<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>

关于Javascript 在 JSfiddle 中工作，但在 Chrome 或 IE 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39095654/

上一篇：Javascript 用 dom 对象的值替换字符串

下一篇：javascript - 在 cluster.on 上使用 babel 在 ES6 和 ES2016 之间的不同行为

相关文章：

css - 为什么我的内容会脱离 div 结构？

javascript - 拼接方法未显示正确结果

javascript - 在 Canvas 中清除和填充矩形与背景颜色之间的区别

javascript - 如何从 View 中删除特定 CSS 文件的引用

javascript - HTML 5 chartjs 不能作为静态文件工作

jquery - 如何在 Windows 上调整所选 jquery 下拉列表的大小

jquery - SCSS 无法编译 - 动画延迟

Javascript 将变量设置为输入，然后导航到页面

javascript 使用indexOf搜索字符串

html - 如何在 bootstrap 4 列中垂直和水平居中文本？

©2024 IT工具网  联系我们