5

ここに私の最初の投稿。マウスオーバーでサブメニューが下にスライドする水平メニューを作りたいです。jQuery を使用できることはわかっていますが、これは JavaScript のスキルを練習するためのものです。

次のコードを使用します。

var up = new Array()
var down = new Array()
var submenustart

function titleover(headmenu, inter)
{
 submenu = headmenu.lastChild

 up[inter] = window.clearInterval(up[inter])
 down[inter] = window.setInterval("slidedown(submenu)",1)
}

function slidedown(submenu)
{
 if(submenu.offsetTop < submenustart)
 {
  submenu.style.top = submenu.offsetTop + 1 + "px"
 }
}

function titleout(headmenu, inter)
{
 submenu = headmenu.lastChild

 down[inter] = window.clearInterval(down[inter])
 up[inter] = window.setInterval("slideup(submenu)", 1)

}

function slideup(submenu)
{
 if(submenu.offsetTop > submenustart - submenu.clientHeight + 1)
 {
  submenu.style.top = submenu.offsetTop - 1 + "px"
 }
}

変数 submenustart は、私の質問に関係のない別の関数の値に割り当てられます。
HTML は次のようになります。

<table class="hoofding" id="hoofding">
 <tr>
  <td onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"><a href="#" class="hoofdinglink" id="hoofd1">AAAA</a>

  <table class="menu">
   <tr><td><a href="...">1111</a></td></tr>
   <tr><td><a href="...">2222</a></td></tr>
   <tr><td><a href="...">3333</a></td></tr>
  </table></td>

  <td onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"><a href="#" class="hoofdinglink">BBBB</a>

  <table class="menu">
   <tr><td><a href="...">1111</a></td></tr>
   <tr><td><a href="...">2222</a></td></tr>
   <tr><td><a href="...">3333</a></td></tr>
   <tr><td><a href="...">4444</a></td></tr>
   <tr><td><a href="...">5555</a></td></tr>
  </table></td>
        ...
 </tr>
</table>

何が起こるかは次のとおりです。
(たとえば) メニュー A を行ったり来たりすると、正常に動作します。ここでメニュー B に移動すると、A に適用された間隔が B に適用されます。現在、B に適用されている 2 つの間隔関数があります。元は A 用であり、B のマウスオーバーによってトリガーされた新しい関数です。A に移動する場合すべての間隔が A に適用されます。

私は何時間も探していましたが、完全に立ち往生しています。

前もって感謝します。

4

2 に答える 2

7

私の最初の提案は

  1. セミコロンの挿入に頼らず、セミコロンを適切に使用する練習をする
  2. 関数を文字列として渡さないでください (暗黙の が必要ですeval)
  3. JavaScript を使用して目立たない方法でイベントを添付する

.

var up   = [],
    down = [],
    submenustart;

function titleover(headmenu, inter) {
    up[inter]   = window.clearInterval(up[inter]);
    down[inter] = window.setInterval(function() { slidedown(headmenu.lastChild); }, 1);
}

function slidedown(submenu) {
    if ( submenu.offsetTop < submenustart  ) {
        submenu.style.top = submenu.offsetTop + 1 + "px";
    }
}

function titleout(headmenu, inter) {
    down[inter] = window.clearInterval(down[inter]);
    up[inter]   = window.setInterval(function() { slideup(headmenu.lastChild); }, 1);
}

function slideup(submenu) {
    if ( submenu.offsetTop > submenustart - submenu.clientHeight + 1 ) {
        submenu.style.top = submenu.offsetTop - 1 + "px";
    }
}

2 番目の提案は、テーブルは表形式のデータではないため、メニューにテーブルを使用しないことです。代わりに、ソートされていないリストを使用してください。

<ul class="hoofding" id="hoofding">
    <li onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)">
        <a href="#" class="hoofdinglink" id="hoofd1">AAAA</a>
        <ul class="menu">
            <li><a href="...">1111</a></li>
            <li><a href="...">2222</a></li>
            <li><a href="...">3333</a></li>
        </ul>
    </li>
    <li onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)">
        <a href="#" class="hoofdinglink">BBBB</a>
        <ul class="menu">
            <li><a href="...">1111</a></li>
            <li><a href="...">2222</a></li>
            <li><a href="...">3333</a></li>
        </ul>
    </li>
</ul>
于 2010-05-14T06:02:51.680 に答える
0

私の知る限り、(そして Gecko DOM リファレンスによると) window.clearInterval() は何も返さないため、おそらく問題が発生します。

于 2010-05-14T05:50:38.517 に答える