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