0

这似乎是一个简单而直接的问题，它可能有一个简单的答案。我的工具栏中有两个下拉框，一个在悬停时下降，另一个在单击时下降，另一个在悬停时下降。

我一辈子都想不出如何让它们独立运行。我对 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我们应该检查的内部。

Doing$('ul, this')将传递一个参数，jQuery 将在整个文档中搜索'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 回答