0

なぜこの関数が私をページの一番上に置くのか誰か教えてもらえますか?

この問題を解決する方法はありますか？

または、使用するより良いコードの提案はありますか?

PS これは 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>
4

2 に答える 2

0

ここで私はjQueryを使用してbinを実行しました：

1）最初に最新のjquery.jsファイルをhtmlヘッダータグに含めます。

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');
        }
    });
});

ビンで試してみてください：http：//codebins.com/bin/4ldqpal

于 2012-07-17T08:18:44.367 に答える
0

なぜ単純化しないのですか？あなたはただ試すことができます：

<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);". #存在しないアンカーへの参照と同様に、ページの先頭に移動します。

于 2012-07-17T02:54:21.777 に答える