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。