I am using combination of the Wayfinder and Accordion menu to drive behaviour of the left column menu. This menu has two levels, i.e.:
<ul class="accordion">:
Menu 1
Sub-menu 1.1
Sub-menu 1.2
Sub-menu 1.3
Menu 2
Sub-menu 2.1
Sub-menu 2.2
Menu 3
Sub-menu 3.1
Sub-menu 3.2
Menu 4
Sub-menu 4.1
Sub-menu 4.2
There is also the following header menu:
<ul class="nav"> (no sub-menus):
Menu 2
Menu 3
The below code handles the left column menu ("accordion" class). I would like extend the code, so clicking on 'Menu 2' from the header menu ("nav" class) would have the very same effect as clicking on the 'Menu 2' ("accordion" class). I.e. clicking on the 'Menu 2' ("nav" class) would expand 'Menu 2' with "accordion" class.
Hers is the code:
<script type="text/javascript">
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu'),
nav_head = $('.nav > li > a');
// Open the first tab on load
accordion_head.eq(2).addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}
});
nav_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the 'accordion tabs' on click on the 'nav tabs'
<missing part>
});
});
</script>
Many thanks, LG
Target the index of the clicked parent element as long they are in the same order (after the home button)
$(function(){
var accordion_head = $('.accordion > li > a'),
accordion_sub = $('.accordion li > .sub-menu'),
nav_head = $('.nav > li > a');
accordion_head.not('.active').on('click', function(e){
e.preventDefault();
if (!$(e.target).hasClass('active')){
$('.accordion > li > a').removeClass('active');
accordion_sub.slideUp();
$(this).addClass('active').closest('li').find('.sub-menu').slideDown();
}
});
nav_head.on('click', function(e){
e.preventDefault();
$('.accordion > li').eq( $(this).closest('li').index() ).find('a').click();
});
});
Related
When a menu page is loaded hide the parent menu and display only the sub menu with checkboxes.
i have tried this but it is not hiding parent menu
$('li').on('click', function(e) {
$(this).children('ul').toggle();
$(this).siblings('li').find('ul').hide();
e.stopPropagation();
});
try closest
$('li').on('click', function(e) {
$(this).children('ul').toggle();
$(this).closest( "ul" ).hide();
e.stopPropagation();
});
Im trying to create a dropdown with jQuery.
So far I have written my code to show the menu, but once open and my users clicks an item, the menu then closes.
Anybody have an idea of how to combat this?
http://jsfiddle.net/8fnhb6yr/
// Language selector
$('.sub-lang').on('click', function(e){
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
Just check also if e.target parent is li.sub-lang like the following
$('.sub-lang').on('click', function(e){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('sub-lang')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
li ul {display:none;}
li.sub-lang.active ul {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="sub-lang">
English
<ul style="">
<li>International</li>
<li>UK & Ireland</li>
</ul>
</li>
The menu close because you listen to the click event on the menu (.sub-lang).
When you click on a children, the event will "bubble" and the parent will have the event too. So you have to listen to the click event on children too to prevent it to bubble :
$('.sub-lang ul a').click(function(event) {
event.stopPropagation();
event.preventDefault();
});
I edited your fiddle
I have the following dropdown that opens when the mouse hovers it:
Now is it possible to open the same dropdown when the user highlights it via the tab key.
I've tried learning from this: Selecting div in custom dropdown using Keyboard (Up, down and enter keys)
But this not seems to be working.
Thanks to anyone who can help!
HTML:
<div class="choose_language">
<a class="btn_choose_language" href="#" title="Change language">
<abbr title="English">EN</abbr>
<img alt="" height="11" src="/assets/nav_btn_choose_language.png" width="15">
</a>
<ul class="radius5" style="overflow: hidden; display: none;">
<li>
<a href="/jobs?locale=fr">
<abbr title="Français">FR</abbr>
</a>
</li>
<li>
<a href="/jobs?locale=nl">
<abbr title="Nederlands">NL</abbr>
</a>
</li>
</ul>
</div>
JS:
$(document).ready(function () {
/* =============================================================================
PORTAL NAV -> highlight clicked element + show/hide and equalize heights of Main Nav level 2
========================================================================== */
$('header nav#nav > ul li a h3, header nav#nav-mystib > ul li a h3').click(function(e) {
e.stopImmediatePropagation();
//alert($(this).html())
if(e.target != this) return;
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box except clicked one
$('.context_box').not($(this).parent().parent().children('.context_box')).fadeOut(100);
//hide more_info box and .my_space box if open
$('.my_space .more_info_box, .my_space .opened').hide();
//show/hide THIS context box
$(this).parent().parent().children('.context_box').fadeToggle(0);
//set level2 columns at same height
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:lt(5)").equalHeights();
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:gt(4)").equalHeights();
//reset the selected item
$('#nav_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
/* =============================================================================
NAV -> highlight clicked element
========================================================================== */
$('header nav#nav-mystib > ul li a h3').click(function() {
//reset the selected item
$('#nav-mystib_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
// Nav -> show/hide language selector
$('.choose_language').hover(function() {
if (detectmob()) { return;}
$('.choose_language ul').slideToggle(200)
});
/* open mySpace*/
$('.my_space .closed').click(function() {
$('.my_space .opened').show()
return false;
});
/* close mySpace*/
$('.my_space .opened .btn_close').click(function() {
$('.my_space .opened').hide();
return false;
});
$('.my_space .info').click(function(e) {
e.stopImmediatePropagation();
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box
$('.context_box').hide();
$('.my_space .more_info_box').fadeToggle(200)
});
// Hide context_box, .more_info_box when click outside of it
$(".context_box, .more_info_box").bind( "clickoutside", function(){
$(this).hide();
});
$(".choose_language").bind( "clickoutside", function(){
if (detectmob()) { return;}
$(this).children('ul').hide();
});
// Hide context_box, .more_info_box when mouse is outside of it
$(".context_box, .more_info_box").hover(function(){
var el=this;
$(el).stop(true,false)
},function(){
var el=this;
$(el).delay(700).hide(10)
});
});// end of dom ready
you can do it like this:
You check if the element got focus, and then show it via jQuery.
You can also use blur to check if the element lost focus and hide the drop-down (I added the class last to the last li element, you can do it in a variety of ways).
<a href="/jobs?locale=nl" class="last">
$(document).ready(function () {
$( ".btn_choose_language" ).focus(function() {
$( ".radius5" ).show();
});
$( ".last" ).blur(function() {
$( ".radius5" ).hide();
});
});// end of dom ready
I am using jQuery to turn my css dropdown menu into a touch enabled menu when on devices that support it. The problem I am having is that I have the parent li's behavior stopped using e.preventDefault() and I cant seem to figure out how to get the children li's to function as normal. Here is the code I am using:
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
$('#menu > li:has(ul.sub-menu)').click(function (e) {
e.preventDefault();
$('#menu > li > a.sub-menu').toggle(300);
$('#menu > li > ul > li > a').trigger('click');
})
}
The functionality of keeping the main li from going through and toggling the sub-menu works perfectly. I now just need the sub-menu a to go through when clicked.
Stop the propagation from those anchor elements
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
$('#menu > li:has(ul.sub-menu)').click(function (e) {
e.preventDefault();
$('#menu > li > a.sub-menu').toggle(300);
$('#menu > li > ul > li > a').trigger('click');
})
$('#menu ul.sub-menu a').click(function (e) {
e.stopPropagation();
})
}
I'm looking for a cross browser compatible solution to highlight tabs. On page load the first tab should highlight and on click of the other tabs, the first tab would unhighlight and the selected tab would highlight. Can't get this functionality working in same fashion in IE and Firefox at the same time. Any inputs on that?
Note: The below code works but when I click on any other link on the page, the focus on the tabs is lost and hence the currently selected tab is not highlighted.
JS
$(document).ready(function () {
activate('focusmeplease');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
});
});
function activate(link) {
if (document.getElementById) document.getElementById(link).focus();
else if (document.all) document.all(link).focus();
}
HTML
<div id="tabs">
<ul>
<li class="clas" onclick="javascript: addPlayer('tab-1','1649028604001');">
First tab
</li>
<li class="clas" onclick="javascript: addPlayer('tab-1','1651558610001');">
Second tab
</li>
</ul>
<div id="tab-1"></div>
</div>
In your click event, just call the focus method. Like so:
$(document).ready(function () {
activate('focusmeplease');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
$(this).focus(); //i've added this
});
});
See this Fiddle HERE
Finally this is the code that worked across browsers. I had to move the addPlayer function from the onClick action of the anchor tag to within the jQuery li click function.
jQuery(document).ready(function(){
addPlayer('tab-1', '1649028596001');//on page load, display this.
jQuery('#tabs ul li:first').addClass('active');
jQuery('#tabs ul li').click(function () {
addPlayer('tab-1', playerIdArray[jQuery(this).index()]);
jQuery('#tabs ul li').removeClass("active");
jQuery(this).addClass("active");
});
});
<ul>
<li class="class4" >Bond</li>
<li class="class5" >Stock</li>
</ul>
<div id="tab-1">
</div>