ドロップダウンメニューを作成します。ブートストラップ3タブをクリックするとドロップダウンが発生する
ALL
またはFILM
のようなタブをクリックしようとすると、すべての要素が閉じられます。
ボタンPRODUCT.dropdown-toggle
を再度クリックして再度開く必要があります。
このような私のコード例:
var App = function() {
return {
//Animate Dropdown
initAnimateDropdown: function() {
function MenuMode() {
jQuery('.dropdown').on('show.bs.dropdown', function (e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
jQuery('.dropdown').on('hide.bs.dropdown', function (e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
}
jQuery(window).resize(function() {
if (jQuery(window).width() > 768) {
MenuMode();
}
});
if (jQuery(window).width() > 768) {
MenuMode();
}
},
};
}();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="dropdown mega-menu-fullwidth active open">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container" style="width: 100%">
<div class="row equal-height">
<div class="col-sm-12 no-padding">
<div class="listproductmenu">
<ul class="nav nav-tabs" id="myTab">
<li class="">
<a data-toggle="tab" href="#tab-0" aria-expanded="false">
ALL
</a>
</li>
<li class="">
<a data-toggle="tab" href="#tab-1" aria-expanded="false">
FILM
</a>
</li>
<li class="active">
<a data-toggle="tab" href="#tab-2" aria-expanded="true">
MUSIC
</a>
</li>
</ul>
<div class="tab-content" style="padding: 20px">
<div id="tab-0" class="tab-pane fade">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Sonata">
Sonata
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Elantra">
Elantra
</a>
</div>
</div>
</div>
<div id="tab-1" class="tab-pane fade">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Sonata">
Sonata
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Elantra">
Elantra
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Accent">
Accent
</a>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane fade active in">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/santa-fe">
Santa Fe
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Tucson">
Tucson
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
参照くださいモーダルということですか? – claudios
@MuhammadUsman私はドロップダウンメニューを使用する必要があります。なぜなら、メニュー内のアイテムだけです。ポップオーバーは、ツールチップが好きな方法のみです。 – vanloc
@claudios JavaScriptコードのみ。あまりにも多くのコードを見て、私は簡単に見えるようにjavascriptをきれいにする。 – vanloc