ドロップダウンの水平メニューバーがあり、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");
}
});
ここをクリックして私のサイトをライブで表示すると、スクリプトがライブで呼び出されない理由を簡単に確認できます。