0

「onmousedown」を明らかにするいくつかの非表示の div があります。ただし、非表示のコンテンツを非表示にするには、リンクを 2 回クリックする必要があります。同じリンクを 2 回クリックするのではなく、ページ上の他の「onmousedown」リンクをクリックするとコンテンツが消えるようにしたいと思います。リンクを 2 回クリックせずに別の onmousedown リンクをクリックすると、コンテンツがネストされてオーバーラップします。可視性を切り替えるために使用しているコードは次のとおりです。

function toggleVisibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

これがjsfiddleです。(申し訳ありませんが、何らかの理由で jquery が機能していません。おそらく、一部の専門家は、私が間違ってコピーした場所を確認するでしょうが、それ以外の場合は、何が起こっているかをかなり明確に理解できると思います。各 div の非表示のコンテンツがすべて表示されていることを想像してください。すぐにリンクの下にネストされます。)

4

1 に答える 1

1

試す

<div class="nav">
    <a href="#hello">Hello</a>
    <a href="#hi">Hi</a>
    <a href="#howdy">Howdy</a>
</div>

<div class="sub" id="hello">a
    Hello hello hello
</div>

<div class="sub" id="hi">
    Hi hi hi hi hi hi
</div>

<div class="sub" id="howdy">
    Howdy Howdy Howdy
</div>

それから

jQuery(function () {
    var $subs = $('.sub');
    $('.nav a').on('mouseenter', function () {
        var $target = $($(this).attr('href'));
        $subs.not($target).hide();
        $target.toggle();
    });
});

デモ:フィドル

あなたのフィドルが機能していなかったのはなぜですか? toggleVisibility関数がグローバル スコープで検索されるインライン モードで関数を使用していましたが、関数定義をonloadコールバック (左パネルの 2 番目のドロップダウンで選択された onload) に追加し、クロージャー スコープ関数を作成しました。選択Nowrap Header/Bodyして修正します。

あなたのコードが機能しなかったのはなぜですか? マウスオーバーを行うたびに、最初に以前に開いたナビゲーション項目を非表示にしてから、新しい項目を開く必要があります。jQueryの方法で行う方がはるかに簡単なので、私のソリューションでは、上記のjQueryソリューションを採用しました。

于 2013-11-15T00:06:17.573 に答える