jQuery的UI选项卡中添加下拉菜单

Question

我已经添加一个“JQuery的UI选项卡”的选项卡上的下拉菜单，总之我有一个页面，如：

$(function() { 
 
    $("#tabs").tabs(); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a></li> 
 
    <li><a href="#tabs-2">Tab 2</a></li> 
 
    <li><a href="#tabs-3">Tab 3</a></li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Content of tab 1.</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Content of tab 2.</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Content of tab 3.</p> 
 
    </div> 
 
</div>

当用户点击“标签2”时，我想显示一个包含两个列表项（“标签2”和一个假设的“标签4”）的下拉菜单。

如何在JQuery UI选项卡上添加下拉菜单？我怎样才能添加一个“隐藏的”附加标签？

感谢

更新： 我想有这样的：

Answer 1

下面的例子可以帮助您开始。

$(function() { 
 
    $("#tabs").tabs(); 
 

 
    //Below code hides Tab 4 (#tabs-4) 
 
    $("#tabs").find('a[href="#tabs-4"]').closest('li').hide(); 
 

 
    $('.tabsubmenu li').click(function() { 
 
    $('.tabsubmenu li').removeClass('active'); 
 
    $(this).addClass('active'); 
 

 
    if ($(this).text() == 'Sub menu 1') 
 
     $("#tabs").tabs({ 
 
     active: 1 
 
     }); 
 
    else { 
 
     $("#tabs").tabs({ 
 
     active: 3 
 
     }); 
 
     $('a[href="#tabs-4"]').closest('li').removeClass('ui-tabs-active ui-state-active'); 
 
     $('a[href="#tabs-2"]').closest('li').addClass('ui-tabs-active ui-state-active'); 
 
    } 
 
    }); 
 
});

* { 
 
    outline: none; 
 
} 
 

 
li.tab ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    border: 1px solid #d5d5d5; 
 
    border-radius: 0 0 3px 3px; 
 
} 
 

 
li.tab:hover ul li { 
 
    color: #454545; 
 
    margin: 0; 
 
    background-color: #e9e9e9; 
 
    padding: 4px 10px; 
 
    cursor: pointer; 
 
    border-bottom: 1px solid #d5d5d5; 
 
} 
 

 
li.tab:hover ul li:hover, 
 
li.tab:hover ul li.active { 
 
    background-color: #ffffff; 
 
} 
 

 
li.tab:hover ul { 
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a></li> 
 
    <li class="tab"><a href="#tabs-2">Tab 2 ▼</a> 
 
     <ul class="tabsubmenu"> 
 
     <li>Sub menu 1</li> 
 
     <li>Sub menu 2</li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a></li> 
 

 
    <!-- Below code represents Tab 4 header/link --> 
 
    <li><a href="#tabs-4">Tab 4</a></li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Content of tab 1.</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <!-- Add the tab content here --> 
 
    <p>Tab 2 : Content of tab 2.</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Content of tab 3.</p> 
 
    </div> 
 
    <!-- Below code represents the body of Tab 4 --> 
 
    <div id="tabs-4"> 
 
    <p>Tab 4 : Content of tab 4.</p> 
 
    </div> 
 
</div>

Answer 2

没有提供原生的选择要做到这一点，所以我们将使用一些jQuery UI的黑客。我们的策略将创建一个jQuery UI菜单元素，它将被隐藏。当用户点击标签元素时，我们将显示相对于鼠标指针定位的菜单。

基地HTML

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tab 1</a></li> 
    <li><a href="#tabs-2">Tab 2</a></li> 
    <li><a href="#tabs-3">Tab 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Content of tab 1.</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Content of tab 2.</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Content of tab 3.</p> 
    </div> 
</div> 

现在，我们创建一个menu元素（http://jqueryui.com/menu/），它会默认为隐藏：

<ul id="submenu" style="width:150px;display:none;"> 
    <li><div>Option 1</div></li> 
    <li><div>Option 2</div></li> 
</ul> 

的Javascript：

$(function() { 
    $("#tabs").tabs(); //initialize the tabs 
    $("#submenu").menu(); //initialize the created menu 
}); 

捕获点击事件在每个标签上：

$("a[href^='#tabs']").on("click",function(){ 

    if ($(this).attr("href")=="#tabs-2"){ 
    //it is the tab2, show the menu 
    $("#submenu").show().position( 
    { my: "left top", 
    of: event 
    }); 
    }else{ //is a different tab, hide the menu 
    $("#submenu").hide(); 
    } 
}); 

如果用户选择子菜单上的东西，把它隐藏

$("#submenu").on("click",function(){$(this).hide();}); 

检查MI fiddle。