Создаю раскрывающееся меню; У меня есть проблема:Bootstrap 3 Dropdown lost when click on tab
Когда я попытался щелкнуть по вкладке, как 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 Я должен использовать Dropdown из-за этого только элемент в моем меню. Popover только метод, как всплывающие подсказки. – vanloc
@claudios Только код javascript. Кажется, слишком много кода, я очищаю javascript для легкого просмотра. – vanloc