I'm using TB 3 in my app. I'm using some nav tabs and I want to by default disable a few as follows (this is not part of a drop-down menu):
<ul class="nav">
<li class="disabled">Tab</li>
</ul>
My disable function:
$('.nav li.disabled').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
The goal is to remove .disabled when a condition is met so the link is re-enabled or clickable again. This changes the appearance of the tab only, not the functionality. Further tests show shown.bs.tab is still fired no matter what I do here.
Apparently, bootstrap doesn't "like" changing active tabs.
Here's the working jsFiddle (Bootstrap 3.0).
And the working jsFiddle (Bootstrap 2.3.2).
Here's the idea:
$(document).ready(function() {
$('#store-tab').attr('class', 'disabled');
$('#bank-tab').attr('class', 'disabled active');
$('#store-tab').click(function(event) {
if ($(this).hasClass('disabled')) {
return false;
}
});
$('#bank-tab').click(function(event) {
if ($(this).hasClass('disabled')) {
return false;
}
});
$('.selectKid').click(function(event) {
$('li').removeAttr("disabled");
$('#bank-tab').attr('class', 'active');
$('#store-tab').attr('class', '');
});
});
Courtesy of.
Related
I am super stuck trying to split a form up in multiple tabs but having issues with the next and previous buttons on the second and third tab.
I want the tabs on top to change state as you would cycle through the tabs by clicking the buttons.
I have created a code pen and if anyone out there knows what I am doing wrong please let me know.
https://codepen.io/austin-simpkins/pen/yLyNLem
$('.btnNext').click(function() {
$('.nav-pills > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills > .active').prev('li').find('a').trigger('click');
});
The active class is being set on the a.nav-link node, so you need to look for the active state of that:
$('.btnNext').click(function(){
$('.nav-item > a.nav-link.active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-item > a.nav-link.active').parent().prev('li').find('a').trigger('click');
});
The active link is not the immediate child of nav-pills, so remove the child (>) selector:
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
})
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
})
Demo
Bootstrap 4 Tabs with Previous & Next buttons
I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.
I've tracked it down to this JS:
$(function() {
$('li.dropdown-submenu').on('click', function(event) {
event.stopPropagation();
if ($(this).hasClass('open')){
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.
Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Need the best of both here!
I think you almost had it, you just needed to look for the different clicks.
The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.
<script>
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
if ($(this).hasClass('test')) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
} else {
$('.dropdown-submenu ul').hide();
}
});
});
</script>
Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA
Maybe this is what are you looking for.
This code to close submenu when clicking another submenu.
Javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
/* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */
$(this).next('ul').find('.dropdown-menu').each(function(){
$(this).hide();
});
/* This is to find another dropdown-menu have has been opened and hide its submenu */
var xw = $(this);
$(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){
if($(this).next("ul").is(":visible")){
$(this).next("ul").hide();
}
});
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
And JSFiddle example : https://jsfiddle.net/synz/vasho634/
I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
if(siblingUl == "block"){
$(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();
}
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
In mobile view of my page, when the menu option is selected, it drops down and an expanded class value is added. That value never gets removed once I click on a menu element. I need to remove the expanded class value when any item in the menu is clicked and remove the expanded menu since it covers the entire page of my one page site.
check in mobile view.
<nav class="top-bar" data-topbar="" style="position: fixed; top: 0px;">
.
.
.
</nav>
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".expanded").hasClass("expanded in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
</script>
You can do something like this.
You can remove that "expanded" class from the "top-bar" for each menu item click by checking that class is exist.
$(".top-bar-section ul li > a").click(function() {
if($('.top-bar').hasClass('expanded')){
$('.top-bar').removeClass('expanded')
}
});
Use $('#menuContent').toggleClass('expanded') when the menu button is clicked, and $('#menuContent').removeClass('expanded') when a menu item is clicked, like so:
$(document).ready(function() {
$('#menuButton').click(function(event) {
$('#menuContent').toggleClass('expanded');
});
$('.menuItem').click(function(event) {
$('#menuContent').removeClass('expanded');
});
});
Here is a fully functional JSFiddle to demonstrate.
This question already has answers here:
How do I prevent my dropdown from closing when clicking inside it?
(3 answers)
Closed 4 years ago.
My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?
JSFiddle
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/
I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.
The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function () {
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
'hide.bs.dropdown': function (event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
You can disable the dropdown functionality temporarily. This is a workaround.
Example with input field inside the drop-down "menu":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle', 'off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
$('#yourDropdownID').attr('data-toggle', 'dropdown');
});
This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.
Not close in click out side menu
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is('a.dropdown-toggle')) {
closeble = false;
}
});
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
'hide.bs.dropdown': function () {
return closeble;
}
});
});
HTML
<ul class="navbar-nav pull-right">
<li>Notifications</li>
<li>Messages</li>
</ul>
JAVASCRIPT
$('[data-toggle="popover"]').popover({placement: 'bottom', trigger: 'click' });
//hide popover when click outside
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if ($(this).has(e.target).length === 0 && $('.popoVer').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
CSS
.popover-content {
max-height: 150px;
overflow-y: scroll;
}
I have these two popovers in my page, and when i click in one of this, and after i click in the second, the first popover hides, and everything works fine. But when i after click again on the first popover, it seems doesn't work properly. The mouse can not click in the scroll, and the links in the popover don't work fine. I think the browser is holding open the last opened popover, even if it is hide. Any suggestion? Thanks!
I solved (thanks to another post on popovers) my problem adding this code:
// hide other popovers (and their links from the DOM) opened
$(document).mouseup(function (e) {
if ($('.popover').has(e.target).length === 0) {
$('.popover').toggleClass('in').remove();
return;
}
});