我遇到了一个小问题,我下拉了水平菜单栏,并应用了jquery函数来打开和关闭父项和子项。
太胖了,它在我的本地服务器上可以正常工作,但在我的实时服务器上却不工作。所有东西都上传到实时服务器上,并且我已经多次从实时服务器上检查了所有脚本文件的引用。
这是我的HTML
参考文献:
<script src="../../resources/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
</script>
<script src="../../resources/scripts/smooth.js" type="text/javascript"></script>
HTML代码:
<div id="menu">
<ul id="Ul2" class="opened">
<li class="collapsible"><a href="#" class="collapsible plus">Settings</a>
<ul id="Ul3" class="collapsed">
<li><a href="#">General Settings</a></li>
</ul>
</li>
</ul>
<ul id="Ul4" class="opened">
<li class="collapsible"><a href="#" class="collapsible plus">Email Templates</a>
<ul id="Ul5" class="collapsed">
<li><a href="#">All Email Templates</a></li>
<li><a href="#">Add Email Template</a></li>
</ul>
</li>
</ul>
<ul id="Ul6" class="opened">
<li class="collapsible"><a href="#" class="collapsible plus">City</a>
<ul id="Ul7" class="collapsed">
<li><a href="#">All Cities</a></li>
<li><a href="#">Add City</a></li>
</ul>
</li>
</ul>
这是我的脚本:
$("#menu li a[class~=collapsible]").click(function () {
var element = $(this);
if (element.attr("class") == "collapsible plus") {
element.attr("class", "collapsible minus");
} else {
element.attr("class", "collapsible plus");
}
var list = element.next();
if (list.attr("class") == "collapsed") {
list.attr("class", "expanded");
} else {
list.attr("class", "collapsed");
}
});
Click here实时查看我的网站,以便您轻松检查脚本为何未实时调用的问题。
最佳答案
我建议您不要使用类似的相对路径:
../../resources/scripts/jquery-1.6.4.min.js
只需使用可访问浏览器的网址,例如:
yourdomaain.com/resources/scripts/jquery-1.6.4.min.js
或只是将您的资产放在webroot中。将您的资产(css,js,img)放在webroot外面没有用。如果要向所有人显示资产,那么每个人也必须可以访问每个资产;