Question

任何人都可以告诉我为什么这个功能会让我掉到页面顶部？

任何想法如何解决这个问题？

或者有什么建议可以使用更好的代码？

P.S。这是ebay模板，相当大的菜单部分。

<script type="text/javascript">
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>

我有一个基本的标记：

<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>

Answer 1

为什么不简化它？你可以试试：

<li><a href="javascript:List(this);">Home </a></li>

并将您的JS更改为：

function List(element)
{
    element.parentNode.className = (element.parentNode.className == "on") ? "off" : "on";
}

这简单得多。

编辑：或者您只需将href="#"替换为href="javascript:return(false);"。由于#是对不存在的锚点的引用，它会将您带到页面顶部。

Answer 2

这里我使用jQuery做了bin：

1）首先在html标头标签中包含最新的jquery.js文件。

2）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>

3）CSS样式：

ul#nav{
  background-color:#445566;
}
ul li{
  list-style:none;
}
ul li ul{
  background-color:#558888;
}
ul li a{
  color:#fff;
  text-decoration:none;
}
.off ul{
  display:none;
}
.on ul{
  display:block;
}

4）脚本标签中的JQuery：

$(function() {
    $("ul li ul").each(function() {
        $(this).parent().addClass('off');
    });
    $("ul li").mouseenter(function() {
        if ($(this).hasClass('off')) {
            $(this).removeClass('off');
            $(this).addClass('on');
        }
    });
    $("ul li").mouseleave(function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on');
            $(this).addClass('off');
        }
    });
});

在bin上尝试：http://codebins.com/bin/4ldqpal

展开JAVASCRIPT MENU

2 个答案: