0

ユーザーがプライマリ ナビゲーションの見出しの上にマウスを移動するとドロップダウンするセカンダリ ナビゲーションのあるサイトで作業しています。これらのドロップダウンが「通常の」ドロップダウンのように動作し、クリックすると消えるようにしたいと思います。

通常、これは問題にはなりませんが、このサイトはセカンダリ ナビゲーション用のアンカー リンクに依存しているため、ドロップダウンが使用された後も残ります。それ自体はそれほど面倒ではありませんが、一般的にドロップダウンの動作を期待するように動作することをお勧めします。

残念ながら、私の jQuery/javascript の能力は不十分であり、不足しています。

どんな援助でも大歓迎です。

Javacript は次のとおりです。

function closeList1() {
    var list = document.getElementById("list1");
    if (list.style.display == "block"){
        list.style.display = "none";
    }
}

function closeList2() {
    var list = document.getElementById("list2");
    if (list.style.display == "block"){
        list.style.display = "none";
    }
}

HTML...

<ul class="nav">
    <li>
        <a href="#first" onClick="closeList1">FIRST</a>
        <ul class="first" onClick="closeList1" id="list1">
            <li><a href="#firstone">ONE</a></li>
            <li><a href="#firsttwo">TWO</a></li>
            <li><a href="#firstthree">THREE</a></li>
            <li><a href="#firstfour">FOUR</a></li>
        </ul>
    </li>
    <li>
        <a href="#second" onClick="closeList2">SECOND</a>
        <ul class="second" onClick="closeList2" id="list2">
            <li><a href="#secondone">ONE</a></li>
            <li><a href="#secondtwo">TWO</a></li>
            <li><a href="#secondthree">THREE</a></li>
            <li><a href="#secondfour">FOUR</a></li>
        </ul>
    </li>
</ul>

そしてCSS...

ul.nav li ul{
    list-style:none;
    padding: 0;
    margin: 0;
    position:absolute;
    display: block;
    left:-9999px;
}

ul.nav li ul li{
    float:none;
    padding: 0;
    margin: 0;
    display: block;
}

ul.nav li ul li a{
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: block;
}

ul.nav li:hover ul{
    left:0; 
    top: 0;
}

とにかく、それをチェックしてくれてありがとう、そしてあなたが与えることができるかもしれないどんな助けにも感謝します.

4

2 に答える 2

0

onclick の JavaScript 関数を使ってみてください。これを参照として使用できます: display:none; ブラウザに「なし」と表示される

于 2013-07-25T20:25:46.153 に答える
0

jquery はあなたのためのオプションですか? タグ付けしてメンションしましたが、使用していないようです。私は思います

click()

と

hover()

関数は、このようなものに役立ちます。ここに簡単なフィドルをまとめて、それがどのように機能するかの例を示します。

http://jsfiddle.net/4UVfk/

于 2013-07-25T20:41:12.587 に答える