Question

我有一个使用标签系统来整理内容的页面。为此，我使用了'Tabify'jQuery插件（下面的代码）。

我现在需要做的是向其中一个标签添加一个下拉菜单，这样我就可以有这个标签的子部分。

问题是标签脚本似乎只适用于UL元素的直接子元素，这意味着我的下拉列表中额外的UL和LI元素表现得非常奇怪。

See this example (code below)

我可以管理一个小jQuery，但编辑脚本代码工作可遗憾地超出我的范围。

任何人都知道如何让它发挥作用？

提前致谢，

汤姆

HTML：

<!-- TABS -->
<div class="container">
    <ul id="tab-menu">
        <li class="active"><a href="#tab1">Tab 1</a></li>{/if}
        <li>
            <a href="#tab2">Tab 2</a>
            <ul class="sub_sub_menu">
                <li><a href="#dropdown1">Overview</a></li>
                <li><a href="#dropdown2">Floorplans</a></li>
                <li><a href="#dropdown3">Specifications</a></li>
            </ul>
        </li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
    </ul>
</div>

<!-- CONTENT -->
<div class="container">
    <div id="tab1">
        <p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
    <div id="tab2">
        <div id="dropdown1">
            <p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
        </div>
        <div id="dropdown2">
            <p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
        </div>
        <div id="dropdown3">
            <p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
        </div>
    </div>
    <div id="tab3">
        <p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
    <div id="tab4">
        <p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
</div>

JS：

(function(a) {
    a.fn.extend({
        tabify: function(e) {
            function c(b) {
                hash = a(b).find("a").attr("href");
                return hash = hash.substring(0, hash.length - 4)
            }

            function f(b) {
                a(b).addClass("active");
                a(c(b)).show();
                a(b).siblings("li").each(function() {
                    a(this).removeClass("active");
                    a(c(this)).hide()
                })
            }
            return this.each(function() {
                function b() {
                    location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
                }
                var d = this,
                    g = {
                        ul: a(d)
                    };
                a(this).find("li a").each(function() {
                    a(this).attr("href", a(this).attr("href") + "-tab")
                });
                location.hash && b();
                setInterval(b, 100);
                a(this).find("li").each(function() {
                    a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
                });
                e && e(g)
            })
        }
    })
})(jQuery);

$(document).ready(function($){
  $("#tab-menu").tabify();
});

Answer 1

Hre是我正在谈论的一个演示，你不需要为此做任何javascript调用，你需要做的就是玩你的html和css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tabs With Dropdown Menu</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu 1-1</a></li>
        <li><a href="#">Submenu 1-2</a></li>
        <li><a href="#">Submenu 1-3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

Answer 2

在这里看到我使用bootstrap和tabify在一个标签中打开一个下拉列表，看看是否有帮助，我现在在办公室所以不能做更多，希望你可以使用它并做一些努力让它工作如你所愿

(function(a) {
  a.fn.extend({
    tabify: function(e) {
      function c(b) {
        hash = a(b).find("a").attr("href");
        return hash = hash.substring(0, hash.length - 4)
      }

      function f(b) {
        a(b).addClass("active");
        a(c(b)).show();
        a(b).siblings("li").each(function() {
          a(this).removeClass("active");
          a(c(this)).hide()
        })
      }
      return this.each(function() {
        function b() {

          location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
        }
        var d = this,
          g = {
            ul: a(d)
          };
        a(this).find("li a").each(function() {
          a(this).attr("href", a(this).attr("href") + "-tab")
        });
        location.hash && b();
        setInterval(b, 100);
        a(this).find("li").each(function() {
          a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
        });
        e && e(g)
      })
    }
  })
})(jQuery);

$(document).ready(function($) {
  $("#tab-menu").tabify();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://takazudo.github.io/jQuery.tabify/demos/1/styles.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://takazudo.github.io/jQuery.tabify/jquery.tabify.js"></script>

<!-- TABS -->
<div class="container">
  <ul id="tab-menu">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li>
      <div class="dropdown">
        <a class="dropdown-toggle" type="button" data-toggle="dropdown">Tab 2</button>
        <ul class="dropdown-menu">
          <li><a href="#tab2">Overview</a></li>
    <li><a href="#tab2">Floorplans</a></li>
    <li><a href="#tab2">Specifications</a></li>
  </ul>
  </div>
  </li>
  <li><a href="#tab3">Tab 3</a></li>
  <li><a href="#tab4">Tab 4</a></li>
  </ul>
</div>

<!-- CONTENT -->
<div class="container">
  <div id="tab1">
    <p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido
      consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
  </div>
  <div id="tab2">
    <div id="dropdown1">
      <p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
    <div id="dropdown2">
      <p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
    <div id="dropdown3">
      <p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
  </div>
  <div id="tab3">
    <p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido
      consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
  </div>
  <div id="tab4">
    <p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido
      consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
  </div>
</div>

如何将下拉菜单添加到选项卡菜单

2 个答案: