在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>

​

当用户单击"Tab 2“时，我想显示一个下拉菜单，其中包含两个列表项("Tab 2”和假想的"Tab 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 小提琴。