Question

我正在尝试使用Jquery Tabs创建下拉导航。我的问题是找到隐藏默认打开面板的方法。我希望只有当我将鼠标悬停或单击时才显示下拉列表。我找不到好办法。需要帮助。 HTML

<div id="tabs">
 <ul>
    <li><a href="#tabs-1">Departments</a></li>
    <li><a href="#tabs-2">Faculties</a></li>
    <li><a href="#tabs-3">New Courses</a></li>
 </ul>
 <div id="tabs-1"  >
    <table cellpadding="10" id="table1">
     <tr>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
     </tr>
    </table>
 </div>
 <div id="tabs-2">
     <table cellpadding="10">
     <tr>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
     </tr>
    </table>
 </div>
 <div id="tabs-3">
    <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
 </div>
</div>

JS

$(document).ready(function(){
 $("#tabs").tabs({
    event:'mouseover',      
 });
});

谢谢，伙计们

Answer 1

<强> JS

$(document).ready(function(){
 $("#tabs").tabs({
    event:'mouseover',   
     collapsible: true, active: false
 });
});

DEMO

Answer 2

尝试编辑您的JQuery代码

$(document).ready(function(){
      $('#tabs-1').hide();
      $('#tabs').mouseover(function(){
            $('#tabs-1').show();
      }).mouseout(function(){
            $('#tabs-1').hide();
      });
  });

Answer 3

使用我创建的jsfiddle中的代码

Demo

<强> HTML

<div id="tabs">
 <ul>
    <li><a href="#tabs-1">Departments</a></li>
    <li><a href="#tabs-2">Faculties</a></li>
    <li><a href="#tabs-3">New Courses</a></li>
 </ul>
 <div class="tab" id="tabs-1"  >
    <table cellpadding="10" id="table1">
     <tr>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
     </tr>
    </table>
 </div>
 <div class="tab" id="tabs-2">
     <table cellpadding="10">
     <tr>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
     </tr>
    </table>
 </div>
 <div class="tab" id="tabs-3">
    <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
        <td><a href="">Science</a></td>
        <td><a href="">Biology</a></td>
        <td><a href="">Government</a></td>
 </div>
</div>

<强> JS

$(function(){
    $('#tabs ul li a').click(function(){
        //alert(this)
        var id = $(this).attr('href');
        $('.tab').not(id).slideUp();
        $(id).slideToggle();      
    });
});

<强> CSS

.tab{
     display:none;
}

JQuery选项卡创建DropDown菜单：需要帮助

3 个答案: