jQuery selector bug - javascript

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

Related

jQuery toggle show/hide default content

I have a show/hide toggle that switches between content if menu a is clicked.
Before the click function is triggered content is shown in the default div.
For some reason if you click one of the a tag's twice it successfully toggles the content on/off; however you are left with a blank screen
This is a poor user experience.
How can I avoid this and ensure that the default content is shown if a user selects a menu item twice?
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
Screen
Music
Art
Food
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>
Thanks
Although I'd suggest a completely different approach to handle this problem, to make your code work, I'd do something like this.
https://jsfiddle.net/6cnt95ap/1/
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');
}
}, 500)
});
})

Toggle menu but also allows click inside without closing

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>

Once clicked and menu open, click go to page - jQuery

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

ul li selector doesn't work

I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});

One page website, show/hide divs, menu button will not stay selected

I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>​
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
​
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Categories