Javascript 引导的Tab drop-如果其中一个Tab元素具有dropdown，则它会在调整大小时中断_Javascript_Jquery_Twitter Bootstrap

Javascript 引导的Tab drop-如果其中一个Tab元素具有dropdown，则它会在调整大小时中断

javascript jquery twitter-bootstrap

Javascript 引导的Tab drop-如果其中一个Tab元素具有dropdown，则它会在调整大小时中断,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,使用nav tabs时，如果一个元素（选项卡）具有下拉菜单，并且您开始调整窗口的大小，它在开始时可以正常工作，但是如果拖动使窗口再次变大，则下拉菜单中的项目将与其他选项卡显示在同一行上。从那一刻起，下拉列表变为空。只要调整窗口大小，它就会保持不变。检查下面的示例： HTML <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Tab 1</a>

使用

nav tabs

时，如果一个元素（选项卡）具有下拉菜单，并且您开始调整窗口的大小，它在开始时可以正常工作，但是如果拖动使窗口再次变大，则下拉菜单中的项目将与其他选项卡显示在同一行上。从那一刻起，下拉列表变为空。只要调整窗口大小，它就会保持不变。检查下面的示例：

HTML

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Tab 1</a></li>
  <li role="presentation"><a href="#">Tab 2</a></li>
  <li role="presentation"><a href="#">Tab 3</a></li>
  <li role="presentation"><a href="#">Tab 4</a></li>
  <li role="presentation"><a href="#">Tab 5</a></li>
  <li role="presentation"><a href="#">Tab 6</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown Tab <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li role="presentation"><a href="#">item 1</a></li>
        <li role="presentation"><a href="#">item 2</a></li>
    <li role="presentation"><a href="#">item 3</a></li>
    </ul>
  </li>
</ul>

<ul class="nav nav-tabs  nav-pills">
  <li role="presentation" class="active"><a href="#" data-toggle="tab">Tab 1</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 2</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 3</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 4</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 5</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 6</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true">
      Dropdown Tab <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li ><a href="#" data-toggle="tab">item 1</a></li>
        <li ><a href="#" data-toggle="tab">item 2</a></li>
    <li ><a href="#" data-toggle="tab">item 3</a></li>
    </ul>
  </li>
</ul>

有什么办法可以解决这个问题吗？当元素移动到tabdrop下时，我希望下拉列表保持为下拉列表

更新带tabdrop和不带tabdrop的Printscreen。正确的方法是使用tabdrop，但它在工作方式上存在一些问题。

使用tabdrop

不带tabdrop

此代码足以实现

导航选项卡

。使用

data toggle=“tab”

在选项卡之间切换。删除您在小提琴中使用的脚本，您的

nav选项卡将正常启动并运行
JS
$('.nav-tabs').tabdrop()

HTML
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Tab 1</a></li>
  <li role="presentation"><a href="#">Tab 2</a></li>
  <li role="presentation"><a href="#">Tab 3</a></li>
  <li role="presentation"><a href="#">Tab 4</a></li>
  <li role="presentation"><a href="#">Tab 5</a></li>
  <li role="presentation"><a href="#">Tab 6</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown Tab <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li role="presentation"><a href="#">item 1</a></li>
        <li role="presentation"><a href="#">item 2</a></li>
    <li role="presentation"><a href="#">item 3</a></li>
    </ul>
  </li>
</ul>

<ul class="nav nav-tabs  nav-pills">
  <li role="presentation" class="active"><a href="#" data-toggle="tab">Tab 1</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 2</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 3</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 4</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 5</a></li>
  <li role="presentation"><a href="#" data-toggle="tab">Tab 6</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true">
      Dropdown Tab <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li ><a href="#" data-toggle="tab">item 1</a></li>
        <li ><a href="#" data-toggle="tab">item 2</a></li>
    <li ><a href="#" data-toggle="tab">item 3</a></li>
    </ul>
  </li>
</ul>

















这个问题提出已经两年了，但我会回答
您的问题是您正在手动在HTML中添加下拉列表。
JS创建下拉列表的方式不会造成此问题。
在TabDrop.JS中，dropdown被创建为navtabs的第一个元素，并被向右推有很好的理由，它总是附加到dropdown或navtabs中。由于您手动创建了下拉列表作为最后一个元素，因此出现了此问题。
从html中删除下拉列表，并将所有元素添加为导航项。
您还需要包含popper.js才能查看下拉列表内容
HTML应为：
$（'.nav tabs'）.tabdrop（）










不。。。。因此，我希望tabdrop正常工作，但当您将下拉列表作为选项卡项时，它无法正常工作。要调用tabdrop，您只需调用$（'.nav tabs'）.tabdrop（）
，而无需其他调用。我认为更新后的提琴可以按照您的要求工作。请检查我在更新下面的初始问题中添加的打印屏幕。这不是我想要的。我需要的Tabdrop是在屏幕太小，无法将所有选项卡放在一行时创建一个下拉列表，而是将它们一个接一个地放在两行或更多行上，脚本将它们移动到下拉列表下。从我的提琴手那里查一下exmaple