0

これは単純で率直な質問のように思えるかもしれませんが、おそらく率直な答えがあります。ツールバーに 2 つのドロップダウン ボックスがあります。1 つはホバー時にドロップし、もう 1 つはクリック時にドロップし、もう 1 つはホバー時にドロップします。

私の人生では、それらを独立して実行する方法を理解することはできません。私はjqueryを初めて使用し、ここに来る前にインターネットを精査しました。

CSSなしでフィドルしますが、それでも同じことをします。

http://jsfiddle.net/GQtuH/

ここにjqueryがあります

$(document).ready(function () { 

$('#discoverDrop').hover(
    function () {
        //show its submenu
        $('ul, this').slideDown(500);

    }, 
    function () {
        //hide its submenu
        $('ul, thid').slideUp(500);         

});



$('#profile').toggle(function(){
        $('ul, this').slideDown(500);
    }, function(){
        $('ul, this').slideUp(500);
    });


});

そして必要なマークアップ

<span id="discoverDrop">
       <span id="drop"><m2>Discover</m2>
        <ul>
         <li><m2><a href="../artists"><m2>Artists</m2></a></li></m2>
         <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
         <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
         <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
       </span>
      </span>

      <span id="profile">
        <span id="profileDrop">
          <ul>
           <li><m2><a href="../phpscripts/logout.php"><m2>Logout</m2></a></li></m2>
           <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
           <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
           <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
        </span>
      </span>
4

1 に答える 1

2

$(arg1, arg2) arg1通常、選択する必要があるセレクターを含む文字列です。確認すべき内部ですarg2。jQuery Object

$('ul, this')実行すると単一の引数が渡され、jQuery はtagnameを持つ要素をドキュメント全体'ul, this'で検索します。'ul''this'

$('ul', this)を実行することは、あなたが望むもののように見えます。

$(document).ready(function () {
    $('#discoverDrop').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(500);

        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(500);         

    });
    $('#profile').toggle(function(){
            $('ul', this).slideDown(500);
        }, function(){
            $('ul', this).slideUp(500);
        });

});

<span id="discoverDrop">
   <span id="drop"><m2>Discover</m2>
        <ul>
         <li><m2><a href="../artists"><m2>Artists</m2></a></li></m2>
         <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
         <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
         <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
   </span>
</span>

<span id="profile">
    Click Me to Toggle
    <span id="profileDrop">
        <ul>
           <li><m2><a href="../phpscripts/logout.php"><m2>Logout</m2></a></li></m2>
           <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
           <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
           <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
        </ul>         
    </span>
</span>

フィドル: http://jsfiddle.net/GQtuH/3/

アップデート

float rightレイアウトで for profile を使用している場合は、正しいフローティング要素を HTML の最初に配置することを常にお勧めします。お気に入り ：

<span id="profile">
...
</span>
<span id="discoverDrop">
...
</span>
于 2012-07-21T20:36:11.850 に答える