jQuery悬停显示面板

我相信这很简单，但让我烦恼。我有下面的代码，当鼠标悬停在一个较低的链接上时，可以将面板向上滑动，问题是当我移动到面板上时（当我离开触发器时），面板会向下滑动

HTML基本上是这样的：

<div id="panelHolder">

     <div class="fullTimeSection">
        Slide panel content here...
     </div>

   </div>

   <ul>
     <li id="#menu-item-245"><a href="page.html">Page</a></li>
     <li><a href="page.html">Page</a></li>
     <li><a href="page.html">Page</a></li>
   </ul>

幻灯片面板内容在这里。。。

非常感谢您的帮助

---

谢谢你的提琴样品。请参阅下面的代码以解决您的问题：

HTML:

<div id="wrapper">
    <div id="panelHolder">
        <div class="panel" id="fullTimeSection">Content 1!</div>    
        <div class="panel" id="sixthFormSection">Content 2!</div>    
        <div class="panel" id="partTimeSection">Content 3!</div>
    </div>    

    <nav role="category-navigation" id="catNav">
        <ul id="menu-sections" class="section-menu">
            <li class="menu-item" data-id="fullTimeSection"><a href="#">Full Time</a></li>
            <li class="menu-item" data-id="sixthFormSection"><a href="#">Sixth Form</a></li>
            <li class="menu-item" data-id="partTimeSection"><a href="#">Part TIme</a></li>
        </ul>
    </nav>     
</div>

#wrapper {width:100%; padding:0; position:relative; height:250px; margin-top:250px;}
#catNav ul {list-style-type:none; padding:0; margin:0;}
#catNav li {width:100px; display:inline-block; border:1px solid red;}

#panelHolder {position:absolute; top:-190px; width:100%; height:190px; overflow:hidden;}

.panel{width:94%; height:170px; padding:10px 3%; color:white; position:absolute; top:190px;}

.panel#fullTimeSection {background:#870057;}
.panel#sixthFormSection {background:#232323;}
.panel#partTimeSection { background:#555555;}

$('.menu-item').hover(
     function() {
         var panel = $('#' + $(this).data('id'));
         var captionHeight = panel.height();
         captionHeight = parseInt(captionHeight, 10);
         var topHeight = 190 - captionHeight;
         var topHeight =+ topHeight + 'px';
         panel.stop().animate({ top: topHeight }, 500); 
     },
     function() {
         $('#' + $(this).data('id')).animate({ top: '190px' }, 500);
     }
  );

JS:

<div id="wrapper">
    <div id="panelHolder">
        <div class="panel" id="fullTimeSection">Content 1!</div>    
        <div class="panel" id="sixthFormSection">Content 2!</div>    
        <div class="panel" id="partTimeSection">Content 3!</div>
    </div>    

    <nav role="category-navigation" id="catNav">
        <ul id="menu-sections" class="section-menu">
            <li class="menu-item" data-id="fullTimeSection"><a href="#">Full Time</a></li>
            <li class="menu-item" data-id="sixthFormSection"><a href="#">Sixth Form</a></li>
            <li class="menu-item" data-id="partTimeSection"><a href="#">Part TIme</a></li>
        </ul>
    </nav>     
</div>

#wrapper {width:100%; padding:0; position:relative; height:250px; margin-top:250px;}
#catNav ul {list-style-type:none; padding:0; margin:0;}
#catNav li {width:100px; display:inline-block; border:1px solid red;}

#panelHolder {position:absolute; top:-190px; width:100%; height:190px; overflow:hidden;}

.panel{width:94%; height:170px; padding:10px 3%; color:white; position:absolute; top:190px;}

.panel#fullTimeSection {background:#870057;}
.panel#sixthFormSection {background:#232323;}
.panel#partTimeSection { background:#555555;}

$('.menu-item').hover(
     function() {
         var panel = $('#' + $(this).data('id'));
         var captionHeight = panel.height();
         captionHeight = parseInt(captionHeight, 10);
         var topHeight = 190 - captionHeight;
         var topHeight =+ topHeight + 'px';
         panel.stop().animate({ top: topHeight }, 500); 
     },
     function() {
         $('#' + $(this).data('id')).animate({ top: '190px' }, 500);
     }
  );

和小提琴：

<div id="wrapper">
    <div id="panelHolder">
        <div class="panel" id="fullTimeSection">Content 1!</div>    
        <div class="panel" id="sixthFormSection">Content 2!</div>    
        <div class="panel" id="partTimeSection">Content 3!</div>
    </div>    

    <nav role="category-navigation" id="catNav">
        <ul id="menu-sections" class="section-menu">
            <li class="menu-item" data-id="fullTimeSection"><a href="#">Full Time</a></li>
            <li class="menu-item" data-id="sixthFormSection"><a href="#">Sixth Form</a></li>
            <li class="menu-item" data-id="partTimeSection"><a href="#">Part TIme</a></li>
        </ul>
    </nav>     
</div>

#wrapper {width:100%; padding:0; position:relative; height:250px; margin-top:250px;}
#catNav ul {list-style-type:none; padding:0; margin:0;}
#catNav li {width:100px; display:inline-block; border:1px solid red;}

#panelHolder {position:absolute; top:-190px; width:100%; height:190px; overflow:hidden;}

.panel{width:94%; height:170px; padding:10px 3%; color:white; position:absolute; top:190px;}

.panel#fullTimeSection {background:#870057;}
.panel#sixthFormSection {background:#232323;}
.panel#partTimeSection { background:#555555;}

$('.menu-item').hover(
     function() {
         var panel = $('#' + $(this).data('id'));
         var captionHeight = panel.height();
         captionHeight = parseInt(captionHeight, 10);
         var topHeight = 190 - captionHeight;
         var topHeight =+ topHeight + 'px';
         panel.stop().animate({ top: topHeight }, 500); 
     },
     function() {
         $('#' + $(this).data('id')).animate({ top: '190px' }, 500);
     }
  );

我希望这正是你想要的

编辑

我想你们可以按住菜单面板直到你们不选择其他菜单块。当然，请参见下面的示例代码和FIDDLE：

$('.menu-item').hover(
     function() {
         $('.panel').animate({ top: '190px' }, 500);

         var panel = $('#' + $(this).data('id'));
         var captionHeight = panel.height();
         captionHeight = parseInt(captionHeight, 10);
         var topHeight = 190 - captionHeight;
         var topHeight =+ topHeight + 'px';
         panel.stop().animate({ top: topHeight }, 500); 
     }
  );

---

请显示您的HTML代码。如果你能用小提琴来展示你的问题会更好（我也能更轻松地帮助你）嗨，梅尔维斯，用HTMLHere是我的快速JSFIDLE嗨，梅尔瓦斯，非常感谢你的帮助。是的，它就快到了，但我最不需要的是，当用户将光标放在面板上时，面板会向上滑动以保持竖直，它就像一个超大菜单，但也有其他内容。我知道通常的方法是让他们成为每个李的一部分，这样他们自然会熬夜，但我不能，他们必须分开。谢谢melvas，不幸的是，这是行不通的，如果你有一个尝试，一旦你有任何一块滑上去，它是不可能删除它们的，如果你移动到下一个只是保持开放。它肯定需要通过将光标从链接上移开，或将光标从面板上移开，或将光标放置在下一个链接项上来关闭。很抱歉