0
タブシステムを使用してコンテンツを整理するページがあります。これを行うために、私は 'Tabify' jQueryプラグイン（以下のコード）を使用しました。タブメニューにドロップダウンメニューを追加する方法
ここでは、タブの1つにドロップダウンメニューを追加して、このタブのサブセクションを作成することができます。
問題は、タブスクリプトがUL要素の直接の子要素でのみ動作するように見えることです。これは、ドロップダウンの余分なUL要素とLI要素が非常に奇妙に動作することを意味します。
私は少しの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();
});
この機能を内蔵しているブートストラップタブを使用しないでください。ちょうど –
と言っています。興味深いことに、私に知らせてくれてありがとう。タブでサイトの多くの場所で使用されているが、私に知らせていただきありがとうございます。良い計画を持っているb –