JQuery работает в Dreamweaver, но не в браузере

Итак, вот мой код (не все это, то, что вам нужно понять):JQuery работает в Dreamweaver, но не в браузере

HTML:

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
    jQuery(document).ready(function(){ 
       jQuery("nav ul ul").each(function(){ 
        var navWidth=jQuery(this).width(); 
        var liWidth=jQuery(this).closest("li").width(); 
        var gaps=navWidth-liWidth; 
        var moveLeft=-gaps/2; 
        jQuery(this).css({"margin-left":moveLeft}); 

       }) 
      }) 
</script> 
</head> 
<body> 
<header> 
    <nav> 
      <ul><li> 
      <a href="index.html">ACASA</a></li><li> 
      <a href="cultura.html">CULTURA</a> 
       <ul class="align1"> 
        <li><a href="culturapopulara.html">Cultura populară</a></li> 
        <li class="border"><a href="culturaculta.html">Cultura cultă</a></li> 
        <li class="border"><a href="culturamasa.html">Cultura de masă</a></li> 
       </ul> 
      </li><li> 
      <a href="cultura romaniei.html">CULTURA ROMÂNIEI</a> 
       <ul class="align2"> 
        <li><a href="elementedac.html">Elemente dacice</a></li> 
        <li class="border"><a href="elemrom.html">Elemente romane</a></li> 
        <li class="border"><a href="alte influente.html">Alte influențe</a></li> 
       </ul> 
      </li><li> 
      <a href="interferente culturale.html">INTERFERENȚE CULTURALE</a> 
       <ul class="align3"> 
        <li><a href="romi.html">Români și romi</a></li> 
        <li class="border"><a href="maghiari.html">Români și maghiari</a></li> 
        <li class="border"><a href="evrei.html">Români și evrei</a></li> 
       </ul> 
      </li> 
      </ul> 
    </nav> 
</header> 
</body>

CSS:

nav { 
    text-align: center; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    font-family: Krona One; 
    border-top: 1px solid #fff; 
    text-decoration: none; 
    color: #FFFFFF; 
    font-size: large; 

} 
nav ul { 
    list-style-type: none; 
    position:relative; 
} 

nav ul li { 
    display: inline-block; 
    padding: 25px; 
} 

nav ul li a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 


nav ul li a:hover { 
    text-shadow: 0px 0px 20px #FFFFFF; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

nav ul li a:hover + ul{ 
    display: block; 
    visibility:visible; 
} 

nav ul ul::before { 
    background: url(images/menu_corner.gif) no-repeat 0% 0%; 
    width: 9px; 
    height: 5px; 
    display: block; 
    margin: 0 -5px 0 0; 
    position: absolute; 
    top: -5px; 
    right: 50%; 
    content: ''; 
} 

nav ul ul { 
    text-align: center; 
    font-weight: normal; 
    display: none; 
    visibility: hidden; 
    position: absolute; 
    background-color: #2E2E2E; 
    font-family: 'Open Sans', sans-serif; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    line-height: 20px; 
    padding-left: 0px; 
    padding-right: 0px; 
    margin-top: 30px; 
    font-size: 16px; 
} 

nav ul ul li { 
    display: block; 
    padding-top: 10px; 
    padding-right: 10px; 
    padding-left: 10px; 
    padding-bottom: 10px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

.border { 
    border-top: 1px solid #434343; 
} 

nav ul ul li a:hover { 
    color: #767676; 
    text-decoration: none; 
    text-shadow: 0px 0px 0px; 
} 

body { 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    font-style: normal; 
    font-weight: 400; 
    background-image: url(http://i.imgur.com/qjincKZ.jpg); 
    color: #FFFFFF; 
    margin: 0 0 0 0; 
    background-size: cover; 
}

Я не знаю почему, но jQuery работает только в Dreamweaver ... Чтобы работать в Dreamweaver, мне нужно загрузить jQuery и добавить его в папку с содержимым, но для некоторых излишеств я вставил CDN. Если я загружу все в jsfiddle и поместил javascript-код в поле javascript, он будет работать, но из Dreamweaver это не так.

источник

2015-02-21 Alpha Turtle

использовать различные

Создайте новый документ и вставьте следующий внутри него:

$(document).ready(function() { 
    $("nav ul ul").each(function() { 
     var navWidth = $(this).width(); 
     var liWidth = $(this).closest("li").width(); 
     var gaps = navWidth - liWidth; 
     var moveLeft = -gaps/2; 
     $(this).css({ 
      "margin-left": moveLeft 
     }); 

    }); 
});

Далее, сохраните его как global.js внутри содержит папку, а затем добавить в головке:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="contain/global.js"></script>

Это должно сделать трюк. Надеюсь, это поможет.

источник

2015-02-22 08:39:39 Alin

Смежные вопросы