Question

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

我不能为我的生活弄清楚如何使它们独立运行。我是jquery的新手，在来到这里之前已经浏览了互联网。

没有CSS的小提琴，但仍然做同样的事情。

这是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>

Answer 1

$(arg1, arg2) arg1通常是一个包含我们需要选择的选择器的字符串。 arg2是jQuery Object，我们应该检查它。

执行$('ul, this')将传递单个参数'ul, this'，jQuery将在整个文档中搜索标记为'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配置文件，则始终建议将右侧浮动元素放在HTML中。喜欢：

<span id="profile">
...
</span>
<span id="discoverDrop">
...
</span>

两个独立的下拉框。一个人在悬停时点击另一个

1 个答案: