jQuery onclick不能在我的网站上运行，但在jsfiddle上运行

Question

Herru Stackoverflow !!

我是jQuery的新手。我在JSfiddle上的代码有效，但它在我的网站上不起作用。我不明白为什么我的代码（如下）不能在我的网站上工作，但在jsfiddle（http://jsfiddle.net/vt9115vw/）上工作。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#submenu").click(function () {
    $("#submenu-content").toggle();
});
</script>
<style> 
#mobile-elevator {
    background-color: #0079a8;
    color: white !important;
    font-size: 18px;
    margin-bottom: 10px;
}
#mobile-elevator a {
    color: white !important;
    margin-left: 15px;
}
#mobile-elevator #button {
    border-bottom: 2px solid #E1E6FA;
}
#submenu-content {
    display: none;
}
</style>
<div id="mobile-elevator">  
    <div id="button">
        <span id="submenu">
            Productos
        </span>
    </div>
     <div id="submenu-content">
           Hello
    </div>
    <div id="button">
        <a href="">
            Ayuda
        </a>
    </div>
    <div id="button">
        <a href="">
            Descargas
        </a>
    </div>
    <div id="button" style="border-bottom: 0px solid black;">
        <a href="">
            Contacto
        </a>
    </div>
</div>

我只是想创建一个移动导航栏。

Answer 1

将click事件置于DOM ready内 像这样：

$(document).ready(function(){

$("#submenu").click(function () {
    $("#submenu-content").toggle();
});
});

如果您在jsfiddle中看到，可以选择在domready或on load等内部编写功能。这是因为click事件在jsfiddle中有效在website。

中

Answer 2

function tog()
{
    $("#submenu-content").toggle();
}

添加功能＆＃39; tog＆＃39;用于切换动作。并指定您的事件处理函数＆＃39; tog＆＃39;使用带有id =＆＃39;子菜单＆＃39;

的范围内的onclick元素

    <span id="submenu" onclick='tog()' >

Answer 3

总是尝试在页面末尾加载jQuery和JS脚本，就好像DOM没有准备好，脚本将无效。或者你可以把它们包在里面 -

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

因为它会让脚本等到DOM准备就绪。