0

各メニュー項目のサブメニューは、メニュー項目をクリックするたびにスライドするのではなく、メイン メニュー項目の下にスライドします。問題は、サイト自体が自動的に上にスクロールすることです。メイン メニュー項目には、サイトの上部に固定されたリンクがあるかのようです。それらをクリックすると、サブメニューがスライドアウトしますが、サイト自体は毎回スクロールアップします.

コードをクロスブラウザ互換にする方法は?

JavaScript コード:

 <script type="text/javascript">
 <!--//--><![CDATA[//><!--
 startList = function() {

 if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onclick=function() {

 this.className = (this.className == "on") ? "off" : "on";

        }
    }
}
  }
 }
 window.onload=startList;
 //--><!]]>
 </script>

HTML コード:

 <ul id="nav">
 <li><a href="#">Home </a></li>
 <li><a href="#">About &gt;</a> 
 <ul>
  <li><a href="#">History </a></li>
  <li><a href="#">Team </a></li>
  <li><a href="#">Offices </a></li>
</ul>
</li>
<li><a href="#">Services &gt;</a> 
<ul>
  <li><a href="#">Web Design </a></li>
  <li><a href="#">Internet Marketing </a></li>
  <li><a href="#">Hosting </a></li>
  <li><a href="#">Domain Names </a></li>
  <li><a href="#">Broadband </a></li>
</ul>
</li>
<li><a href="#">Contact Us &gt;</a> 
<ul>
  <li><a href="#">United Kingdom</a></li>
  <li><a href="#">France</a></li>
  <li><a href="#">USA</a></li>
  <li><a href="#">Australia</a></li>
</ul>
</li>
</ul>

このメニューに基づいています: http://www.pmob.co.uk/temp/drop-down-expand.htm#

4

2 に答える 2

0

イベントリスナーにいつでも追加e.preventDefault()して、クリック後にすべてのハイパーリンク効果を削除できます。

preventDefault通常は使用することをお勧めします。

http://jsfiddle.net/Z8Uvj/

$("a").click(function(e){
    //your stuff
    e.preventDefault();
});
于 2013-05-31T04:34:20.077 に答える