Develop Reference

jQuery: hasClass logic issue

I'm building a dropdown menu and checking for classes etc. I'm having an issue where a condition is false, but it's being treated as true.
With the below code snippet, follow these instructions:
Click on "item 1"
Click on the plus icon above "more"
Click on "item 1" again
You'll notice that if you try to reopen the menu by clicking on "item 1" the menu does not open. Why? Those list items do NOT have a class of "show"... so those should open, irregardless of the second submenu, correct?
I'm not understanding what's wrong with my logic. I don't think this is a syntax error because there are no errors in console.
See below:
$(function() {
// main expansion element
$(".expander").click(function() {
var subShown = $("ul > li", this).hasClass("show");
if (!subShown) {
$(".indented", this).slideDown('100').addClass("show");
$(".caret", this).addClass("reversedCaret");
} else {
$(".indented", this).slideUp('100').removeClass("show");
$(".caret", this).removeClass("reversedCaret");
}
});
// sub expansion element
$(".sub-expander").click(function() {
var subSelectText = $(".more-or-less").text();
if (subSelectText != "More") {
$(".indented--sub").slideUp('100').removeClass("show");
$(".sub-caret").removeClass("reversedCaret");
$(".more-or-less").text("More");
} else {
$(".indented--sub").slideDown('100').addClass("show");
$(".sub-caret").addClass("reversedCaret");
$(".more-or-less").text("Show Less");
}
});
// stop propagation on the link element within .expander class
$(".indented").click(function(event) {
event.stopPropagation();
});
});
.expander:hover {
cursor: pointer;
}
.sub-expander--indented {
padding: 0 0 0 23px;
}
.sub-caret {
margin-right: 75px;
}
.indented,
.indented--sub {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="expander">
<span class="caret downCaret right visibleCaret">+</span>
<ul>
<li class="category">Item 1
</li>
<li class="indented">Item 2</li>
<li class="indented">Item 3
<ul class="sub-expander more" style="padding-top:
0px;">
<li class="indented--sub">Chapter 5</li>
<li class="indented--sub">Chapter 6</li>
<li class="indented--sub">Chapter 7</li>
<span class="sub-caret moreCaret visibleLessCaret right">+</span>
<li class="more-or-less less sub-expander--
indented">More</li>
</ul>
</li>
</ul>
</div>

https://jsfiddle.net/3z0zo2gn/
} else {
$(".indented", this).slideUp('100').removeClass("show");
$(".caret", this).removeClass("reversedCaret");
$(".indented--sub").slideUp('100').removeClass("show");
$(".sub-caret").removeClass("reversedCaret");
$(".more-or-less").text("More");
}
As stated in the above comment, you need to remove the show class from indented--sub when removing it from indented.

Your code don't work because you didn't remove class show in li with class indented--sub

Display image when hover over button

This is my site.
What I am trying to do: display an image when user hovers over the links.
I am definitely making some stupid mistake but I am not really sure which.
This is what I have done:
HTML
<ul class="nm">
<li>Cork
<div class="place-image">
<img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
</div>
</li>
.......Remaining li's.....
</ul>
CSS
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
javascript
$('.place-image').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
Please help me out.

You where tying to hover a hidden element. That is why your code was not working. You cannot trigger an event on a hidden element.
$('a').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
Cork
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

You need to add hover event to li like following.
$('li').hover(
function() {
$(this).find('.place-image').fadeIn('slow');
}, function() {
$(this).find('.place-image').fadeOut('slow');
});

What I am trying to do display an image when hover over the links.
make it
<li>
Cork
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>
$('li a').hover(
function() {
$(this).next('.place-image img').fadeIn('slow');
},function() {
$(this).next('.place-image img').fadeOut('slow');
}
);

Issue: you cannot detect a :hover state on an element with display: none
A possible solution might be to hide only the img itself, and listen to the :hover on the wrapper .place-image or on the a or li as you wish. See the demo below:
$('.place-image').hover(
function() {
$('img', this).fadeIn('slow');
},function() {
$('img', this).fadeOut('slow');
}
);
.place-image{
width:326px;
height:326px;
}
.place-image img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
Cork
<div class="place-image">
<img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
</div>
</li>
Alternative solution
Depending on your circumstances you could achieve this also without js:
.place-image {
width:326px;
height:326px;
}
img {
opacity: 0;
transition: opacity .4s ease;
/*TODO: add crossbrowser prefixes*/
}
li:hover img{
opacity: 1;
}
<ul>
<li>
Cork
<div class="place-image">
<img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
</div>
</li>
</ul>

You just have to change your Javascript:(In your website ul has class nm use it to target specific li in ul. )
HTML
<li>
Cork
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>
CSS
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
javascript
$( "ul.nm > li" ).
$('li').hover(
function() {
$(this).find('.place-image').fadeIn('slow');
}, function() {
$(this).find('.place-image').fadeOut('slow');
});

$('a').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
Cork
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

Doing slideToggle and toggleClass at the same time

I'm trying to do a slideToggle and a toggleClass at the same time:
css
li ul { display: none; }
html
<li>
<div class="group"><i class="arrow_maximize"></i> Title</div>
<ul>
<li>anything</li>
</ul>
</li>
js
'click .group': function (event) {
$(event.currentTarget).next('ul').slideToggle(200);
$(event.currentTarget).children('i').toggleClass('arrow_minimize');
}
What I try to get is:
Clicking on .group will slideDown the ul; at the same time the class of i should be changed to 'arrow_minimize'.
Clicking again should set it back: slideUp of ul, change class of i to 'arrow_maximize'

In the toggleClass you also need to specify the other class which the element already has:
$(function(){
$('.group').on('click', function(){
$(this).next('ul').slideToggle(200);
$(this).children('i').toggleClass('arrow_minimize arrow_maximize');
});
});
li ul { display: none }
i.arrow_maximize:before { content: "\25ba" }
i.arrow_minimize:before { content: "\25bc" }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<div class="group"><i class="arrow_maximize"></i> Title</div>
<ul>
<li>anything</li>
</ul>
</li>

How to cancel a CSS style set by 'hover child' selector on event?

I am making a CSS based menu, with submenu items that pop up when the root element is hovered. the problem I have is that I want the CSS menu to close when I click an item in the list, but at that point I am still technically hovering over the top element, so I figured I had to use javascript to hide the menu. But when I set the display property, I set it forever and it overrides the hover selector of the parent node. And so the submenu doesn't show up anymore.
This must be pretty common, but I can't find any answers...
Any help much appreciated!
html:
<ul class="level1">
<li>one
<ul class="level2">
<li id="test">two</li>
<li>three</li>
</ul>
</li>
</ul>
css:
.level1 li:hover > ul {
display: inline;
}
.level2 {
display: none;
}
js:
document
.getElementById('test')
.addEventListener('click',function () {
this.parentNode.style.display = 'none';
// After this the menu doesn't open anymore
// because the style is overriden
});
Here's the jsfiddle

You can try this.
<ul class="level1">
<li class="hoverMe">one
<ul class="level2">
<li id="test">two</li>
<li>three</li>
</ul>
</li>
</ul>
.hoverMe:hover > ul {
display: inline;
}
var test = document.getElementById('test');
test.onclick = function () {
this.parentNode.parentNode.className = "";
};
var level1 = document.getElementsByClassName('level1')[0];
level1.getElementsByTagName("li")[0].onmouseover = function () {
if (this.className != "hoverMe") {
this.className = "hoverMe";
}
};

During hover on parent element, show child (dropdown nav)

I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items. The way I decided to do it is just by putting the drop-down in a div tag. This is easily changeable, i just don't like to go heavy on the html side.
Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.
Here's my js:
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
function () {
dropdown.css('display', 'block');
}
);
Here's my css:
div.nav {
text-align: center;
}
div.nav > ul > li {
margin-top: 15px;
text-align: center;
font-size: 1.25em;
}
div.nav > ul > li {
display: inline-block;
list-style-type: none;
}
div.nav a {
padding: 1em;
}
div.dropdown {
display: none;
background-color: black;
position: absolute;
}
Here's my html:
<div class="nav">
<ul>
<li>Home</li>
<li>
Sample Game
<div class="dropdown">
About it
<br>
Game
</div>
</li>
<li>TP Solutions</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
<div class="clear"></div>

You should not be using "parent" as a variable name, as it's a reserved word.
$(document).ready(function() {
var $dropdown = $('.dropdown'),
$parent = $dropdown.parent();
$parent.on("mouseover",
function () {
$dropdown.css('display', 'block');
}
);
$parent.on("mouseout",
function () {
$dropdown.css('display', 'none');
}
);
});

According to the oreder this has to be done:
add a jQuery plugin first
Then add your script
so the order will be like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
<script>
$(function(){
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(function () {
dropdown.css('display', 'block');
});
});
</script>

Please try the below code.
$(".nav").on("mouseenter","li",function(){
$(this).find(".dropdown").show();
});
$(".nav").on("mouseleave","li",function(){
$(this).find(".dropdown").hide();
});
In your code " dropdown.parent(); " -> this will refer all the parents which have child dropdown and will show the menu. we need to refer current hover parent. Please check the working example in below link.
http://jsfiddle.net/renjith/wX48f/

There are so many good solutions to use jQuery and CSS to show a drop down menus. So you don't need to reinvent the wheel. Here are some examples that you might be able to find one to fit your need.