I am using bootstrap tabs and dropdown with prev next functionality
<div class="row">
<input class="btnPrevious underline" type="button" value="« Previous" />
<input class="btnNext underline" type="button" value="Next »" />
</div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<!--<li class="active">Before Starting the Application</li>-->
<li class="active dropdown tabdrop"> Before Starting the Application<b class="caret"></b>
<ul class="dropdown-menu dm">
<li class="active">Before Starting the Application
</li>
<li>Who Can Apply?
</li>
</ul>
</li>
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li>Applicant Details
</li>
<li>Premises Details
</li>
<li>Details of Personal License Holder
</li>
</ul>
</li>
<li>Fees and Payments
</li>
<li>Checklist
</li>
<li>Conditions
</li>
<li>Submit
</li>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
<li>Tab 4
</li>
<li>Tab 5
</li>
<li>Tab 6
</li>
<li>Tab 7
</li>
</ul>
</div>
To find anchor tag...for prev next
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li, li > ul > li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
But from the script i didn't find all the anchor tag means anchor tag inside the dropdown (li > ul > li > a )
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li>Applicant Details
</li>
<li>Premises Details
</li>
<li>Details of Personal License Holder
</li>
</ul>
</li>
I want to find each anchor tag from nav-tabs for prev and next function. Thanks in Advance.
CHK1LAST();
var $tabs = $('.tabbable li');
$('.btnPrevious').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});
$('.btnNext').on('click', function () {
if ($tabs.filter('.active').find('ul').length > 0) {
var $bb = $tabs.filter('.active').find('ul');
if ($bb.find('li.active').length > 0) {
if ($bb.find('li.active').index() == (parseInt($bb.find('li').length) - 1)) {
if ($bb.parent('li').next('li').find('li').length > 0)
$bb.parent('li').next('li').find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
else
$bb.parent('li').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li.active').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
}
else
$tabs.filter('.active').next('li').eq(0).find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});
Related
I'm creating a sub menu using jquery. I have made the code as below. But there is still something that is not working properly. What I want is, when the start, the menu is closed. Currently, all menus are open. How do I do it, can anyone help me?
$('.list-menu > li').click(function () {
var child = $(this).children('ul');
if(child.length===0){
$(this).children().addClass("active");
return;
}
$('.list-menu ul').not(child).slideUp('normal');
child.slideDown('normal');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
<a href="#">
Querying For More Information
</a>
</li>
</ul>
You can set the child ul elements to display: none on page load using CSS:
ul > li > ul { display: none; }
$('.list-menu > li').click(function() {
var child = $(this).children('ul');
$(this).children().addClass("active");
$('.list-menu ul').not(child).slideUp('normal');
child.slideToggle('normal');
});
ul > li > ul { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
Querying For More Information
</li>
</ul>
I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});
Sorry again but here is my last code and everthing works great except that when i make the jquery the li from 4 to the end moves after the "ul" that i want but i want that li from 4 to the end to move BETWEEN the ul that i want. here is my code:
<nav id="primary_nav">
<ul class="nav" id="nav">
<li id="nav_app_forums" class="left active">Forums</li>
<li id="nav_app_members" class="left ">Members</li>
<li id="nav_app_calendar" class="left ">Calendar</li>
<li id="nav_app_ipchat" class="left ">Chat</li>
<li id="nav_app_ccs" class="left ">Pages</li>
<li id="nav_app_blog" class="left ">Blogs</li>
<li id="nav_app_gallery" class="left ">Gallery</li>
<li id="nav_app_downloads" class="left ">Downloads</li>
</ul>
<ul class="nav">
<li id="nav_other_apps" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="more_apps">More <i class="fa fa-caret-down"></i></a>
<ul id="more" class="dropdown-menu" role="menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>Extra Link</li>
<li>Extra Link</li>
<li>Extra Link</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
if( $('#nav li').length > 5 )
{
$('#nav li:gt(3)').insertAfter('<ul id="more" class="dropdown-menu" role="menu">');
}
i need form you the best code that i have to replace the jquery part or "insert after"
so it the li form 4 to the end would go between the desired ul thanks
Use .appendTo() instead of .insertAfter().
Append puts it inside of the open/closing tags, insert puts it outside the tags.
$('#nav li:gt(3)').appendTo('#more');
JS Fiddle
Try this jsfiddle using .wrapInner
$('#nav li:gt(3)').wrapInner('<ul id="more" class="dropdown-menu" role="menu">');