I would like to click on "Fruit" and have the list appear. However when I click on "Fruit" now, my list of fruits appear but it never dissappears. When I click on the next link "Vegetables", fruit disappears, but now Vegetables won't dissaper even if I click somewhere else on the screen or move the mouse.
$('.menuBar div ul li').click(function() {
$('.menuBar div').hide();
});
function showHideMenu( elem ) {
$('.menuBar div').each( function () {
if ( $(this).hasClass('sub' + elem) ) {
$(this).css('height','0px');
$(this).css('display','inline-block');
$(this).animate({
height: '+=200'
},'slow');
} else {
$(this).css('display','none');
}
});
}
HTML
<html>
<div class="menuBar">
<ul>
<li onclick="showHideMenu('Fruit');">
<span class="fruit"></span>Fruit
</li>
</ul>
</div>
</html>
Related
Firstly apologies for the random title, I really can't think of another way to word it succinctly.
This is my issue.
I have a couple of nav icons, that when clicked toggle menu displays, just like you see everywhere: facebook, etc.
When you click outside of the div it hides the menu.
It works but I have two problems.
Clicking outside works to close the open div, but clicking on the icon that triggers the toggle doesn't close it, it just re-toggles it instantly.
I would like to be able to click inside of the menus without them closing, which they are currently doing onclick.
The html looks something like this, where the user-menu is the click-able icon that toggles the div contained within.
HTML
<nav>
<div class="user-menu">
<div id="user-dropdown">MENU CONTENTS HERE</div>
</div>
</nav>
jQuery
$('.user-menu').click(function () {
$('#user-dropdown').fadeToggle();
});
$(document).mouseup(function(e) {
var container = $("#user-dropdown");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
FIDDLE
https://jsfiddle.net/vo8a1r0p/
EDIT - ANSWER
Using a mixture of Bhuwan's answer and a stopPropagation() it's now working.
Working jQUERY
$(document).on("click", function(e) {
if ($(e.target).hasClass("user-menu")) {
$('#user-dropdown').fadeToggle();
} else {
if ($(e.target).hasClass("dropdown-menu")) {
$('#user-dropdown').show();
} else {
$('#user-dropdown').fadeOut();
}
}
});
$("#user-dropdown").click(function(e){
e.stopPropagation();
});
Working FIDDLE
https://jsfiddle.net/ne4yfbjp/
You can try this
$(document).on("click", function(e) {
if ($(e.target).hasClass("user-menu")) {
$('#user-dropdown').fadeToggle();
} else {
if ($(e.target).closest("#user-dropdown").hasClass("dropdown-menu")) {
$('#user-dropdown').show();
} else {
$('#user-dropdown').fadeOut();
}
}
});
.dropdown-menu {
display: none;
background: gray;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div>
<button class="user-menu">Menu</button>
<div id="user-dropdown" class="dropdown-menu">
<div class="username">
Some User
</div>
<ul>
<li>Link1</li>
<li>Link1</li>
</ul>
</div>
</div>
</nav>
below is my jquery code for a dropdown menu :
$(function(){
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".menu").toggle();
});
var ww = document.body.clientWidth;
if (ww < 1000) {
$(".toggleMenu").css("display", "inline-block");
$(".menu").hide();
$(".menu ul li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".menu li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
})
what i am trying to do is add the class "hover" to the "li" of the clicked "a" so that the drop down menu works properly on mobile deivices(device with less than 1000px in my case). but with the code above, i need to click twice to any "a" element for the dropdown to apper, as far as i am concerned when i click on "a" element, the class "hover" should be added to its parent "li" element and the hidden "ul" under it should be shown(because i have written the css in that manner) but at the moment i should click on the "a" element two times(not double click).The html structure is like:
<ul>
<li>
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
I have a footer list:
<footer id="footer">
<ul>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xxx</p>
<p> xxxx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx </p>
<p> xx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx</p>
<p> xxx</p>
</li>
</ul>
</footer>
that pops out on click to two separate links, like so:
$(document).ready(function() {
$( "#add" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
$(document).ready(function() {
$( "ul li:eq(3)" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.
edit: the two links that pop out the footer are here, the contact link and the phone image:
<section id="side">
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
</section>
Something like this maybe?
$(document).ready(function() {
var $footer = $("#footer").hide(),
$footerItems = $footer.find("ul li").hide(),
footerState = 0;
$("#add, .sidebar ul li").click(function (e) {
e.preventDefault();
footerState = !footerState;
var method = footerState ? 'show' : 'hide';
if(footerState) $footer.show();
$footerItems.get().reduce(function (p, li) {
return p.then(function() {
return $(li)[method]('slow').promise();
});
}, $.when()).then(function() {
if(!footerState) $footer.hide();
});
});
});
DEMO
https://jsfiddle.net/m173gxvg/3/
Something like this? If yes, here are the modifications:
Remove the display:none from the footer css
Add the display:none to the footer ul li css
Modify the javascript code
Here's the js to use after the click:
toggleTimer=500;
$( "#footer" ).find("ul").find("li").each(function() {
jQuery(this).toggle(toggleTimer);
toggleTimer=toggleTimer+500;
});
I think you want to click on each one and then show the next one, is that right?
Then you can use the .next() jquery property to assign the click listener to toggle the next element.
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(function() {
//if none are visible, show the first one, else hide them all
if ($('#footer').find('li').first().css('display') == 'none' ) {
//show the fist LI
$( "#footer" ).find('li').first().toggle( "fast" );
} else {
//hide them all
$('#footer').find('li').hide();
}
});
//add listener to each LI to toggle the NEXT one
$('#footer').find('li').click(function(){
$(this).next().toggle("fast");
});
});
... after your comment...
OR You can show the FIRST hidden one on each click like this:
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(
function() {
//if NO LI are hidden, hide them all, else show one at a time
if ( $('#footer').find('li:hidden').size()==0 ) {
//hide them all
$('#footer').find('li').hide();
} else {
//show the first hidden LI
$('#footer').find('li:hidden').first().show('fast');
}
}
);
});
Is that what you're looking for?
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
HTML:
<div id="accordion">
<div class="top">
Show all | Hide all
</div>
<div class="body">
<div class="item">
item1
<div class="content">
<p>
Item1 content;
</p>
Back to top
</div>
</div>
<div class="item">
Item2
<div class="content">
<ul>
<li>item2 content;</li>
<li style="list-style: none">Back to top</li>
</ul>
</div>
</div>
</div>
</div>
JS:
$("#accordion .content").slideUp();
$("#accordion .item a.head").click(function (e) {
//open tab when click on item
e.preventDefault();
$(this).toggleClass('active');
$(this).next().stop().slideToggle();
if ($(this).hasClass('active')) {
$(this).attr('title', 'hide');
} else {
$(this).attr('title', 'show');
}
});
$("#accordion .showAll").click(function (e) {
//open all tab
e.preventDefault();
$("#accordion .item a").each(function () {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
});
$("#accordion .hideAll").click(function (e) {
//hide all tab
e.preventDefault();
$("#accordion .item a").each(function () {
if ($(this).hasClass('active')) {
$(this).click();
}
});
});
$(".backToTop").click(function (e) {
//scroll to top
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 450);
});
basically it's an accordion, a very simple one done in jquery
JSfiddle here:
http://jsfiddle.net/PqaXZ/6/
(note*: you have to scroll down to see the example)
Anyone can explain why I click "Show All" button, it trigger a click on "Back to top" button?
I don't see anything can possibly cause it in the code
Thanks a lot in advance
Well, in your "show all" click handler, you're clicking all "inactive" links in the accordion:
$("#accordion .item a").each(function () {
if (!$(this).hasClass('active')) {
$(this).click();
}
});
If at least one of the "back to top" links anywhere in the accordion doesn't have the class "active", you're triggering its click event.
Because you're triggering a click on it.
$("#accordion .item a") includes the "show all" button, then you promptly $(this).click(); which simulates a user clicking on that link. Hence, sending them back to top.
Because you are using spaces inside your selector, it is 'clicking' on any a under any .item that is under the #accordion, which includes your 'back to the top' button. If you instead make your selector: #accordion .item>a, then it will only 'click' on as that are immediate children of .items.
#accordion .item a is triggering all the links inside .item you should use
#accordion .item > a
to trigger al the first links but not the childs