We Keep Coding

Dropdown list actions using jquery

I have the following Dropdown List which is not the traditional SELECT and OPTION dropdown list. Using JQUERY, I am wanting to know if there is a way to perform an action when a given option is chosen. EX - When you click the dropdown and choose BIRDS, it will hide some DIV elsewhere on the page. Thank You
<section class="main">
<div class="wrapper">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>View By Category</span>
<ul class="dropdown">
<li><a>Dogs</a></li>
<li><a>Cats</a></li>
<li><a>Birds</a></li>
</ul>
</div>
</div>
</section>

https://jsfiddle.net/o8h4gvgd/5/
use something like this. I hope this will help you.
$(document).ready(function(){
$('.dropdown .bird').click(function(){
$('#section_1').toggle();
$('#section_1').hide();
});
});

$('div#dd ul.dropdown li a').on('click', function() {var clsName = $(this).parent().attr('name'); $("."+clsName).hide()});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<section class="main">
<div class="wrapper">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>View By Category</span>
<ul class="dropdown">
<li name='dogs'>Dogs</li>
<li name='cats'>Cats</li>
<li name='birds'>Birds</li>
</ul>
</div>
</div>
</section>
<div class='dogs'>Div with dogs info</div>
<div class='cats'>Div with cats info</div>
<div class='birds'>Div with birds info</div>

give a class to entries like;
<li><a class="item">Dogs</a></li>
<li><a class="item">Cats</a></li>
<li><a class="item">Birds</a></li>
then, use a click event like;
$(".item").click(function(){
item = $(this).text();
alert(item);
});

$('#dd ul.dropdown a').click(function() {
var _this = $(this);
var index = $('#dd ul.dropdown a').index(_this);
alert(index);
if (index === 2) {
alert(_this.text());
// ..do anything you want
}

$(document).ready(function () {
//Your function on what needs to be done on click
var liClicked = function(obj){
alert("You Clicked : "+$(obj).html());
}
//trigger the onclick based on selected -- in this case '#dd ul.dropdown li a'
$(document).on("click","#dd ul.dropdown li a", function(){
//call the above written function
liClicked(this);
});
});

Close menu when click on li

I making a single page website. When I open my menu and click on a li item, I want my menu to close.
For the moment it is working when I click back on the "menu-burger-wrapper" and I want to set the same thing when I click on items li.
There is my code:
$(document).ready(function() {
$('#menu-burger-wrapper').click(function(e) {
e.preventDefault();
$this = $(this);
if ($this.hasClass('is-opened')) {
$this.addClass('is-closed').removeClass('is-opened');
} else {
$this.removeClass('is-closed').addClass('is-opened');
}
})
});
<nav class="menu-base" id="menu-base">
<ul class="menu-item">
<a id="en-cours" class="work_menu link link--over">
<li>works</li>
</a>
<a class="about_menu link link--over">
<li>about</li>
</a>
<a class="link link--over">
<li>contact</li>
</a>
</ul>
</nav>
<!-- Header -->
<div id="header">
<!-- Menu -->
<div id="menu-burger-wrapper">
<div id="menu-burger">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</div>

Try this - just attach the click handler to the li elements.
var clickHandler = function (e) {
e.preventDefault();
$this = $(this);
if ($this.hasClass('is-opened')) {
$this.addClass('is-closed').removeClass('is-opened');
} else {
$this.removeClass('is-closed').addClass('is-opened');
}
};
//attaching the event to both, together.
$('#menu-burger-wrapper, ul.menu-item li').on('click', clickHandler);

You can use toggleClass to toggle class.
You can use , to separate the elements on which you want to bind event.
$('#menu-burger-wrapper, .menu-item').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('is-opened is-closed');
});
$('.menu-item').on('click', 'li', function() {
$('#menu-burger-wrapper').trigger('click');
});
Demo: https://jsfiddle.net/tusharj/7c5nd7rj/1/

I am trying to hide show menu from an <a><img> with jquery

I am trying to show the .list-menu div show on click and then hide on click when the .hamburger anchor is clicked. Right now nothing is happening.
$('document').ready(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).show() {
});
$( ".hamburger" ).click(function() {
$( ".list-menu" ).hide() {
});
});
});
<div class="logo">
<div class="about-me-button">
<img src="/img/menu.svg" alt="hamburger menu">
</div>
<div class="list-menu">
<ul>
<li>About Me</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>

There is a function named .toggle() that "display or hide the matched elements" and you need only 1 .click() event.
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">
<div class="about-me-button">
<a href="#" class="hamburger">
<img src="/img/menu.svg" alt="hamburger menu">
</a>
</div>
<div class="list-menu">
<ul>
<li>About Me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
</div>

$(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).toggle();
});
});

I think the easiest way would be is the use jquery .toggle() method.
$(".list-menu").hide();
//toggle way
$(".hamburger").click(function () {
$(".list-menu").toggle();
});
or if you would like to go an alternative route you can try something like this
//jquery alternative to toggle
var toggle = false;
$(".hamburger").click(function () {
if (!toggle) {
$(".list-menu").show();
toggle = true
} else {
$(".list-menu").hide();
toggle = false
}
});
I created a fiddle so that you can see how both would work.
https://jsfiddle.net/maenucze/

Why can't I target li element with jQuery.click()?

I have this html:
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>
and this javascript
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
The problem is that when I click on list element only the delegated click on the element fires and not the event on the "li" element.
The "li" elements are added after an Ajax call.
What's going? What am I missing?

This )}; was the problem. Should be this });.
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>

The below answer actually is just a different implementation of your code.
The real answer is
This )}; was the problem. Should be this });.
From the other answer: https://stackoverflow.com/a/27571915/561731
But you really should be using .on in new code :-)
Old answer:
Try using .on
So you can do:
$(document).on('click', 'a', function () {
//event for anchor tag
});
$(function () {
$('#ul_places_list').on('click', 'li', function () {
//stuff for li click event
});
});

if you add the "li" elements in a AJAX call you should add the click event after the elements load. Add this when ajax call end:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addEventToControls)
function addEventToControls()
{
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
}
The add_endRequest Manager fire the handler when a Ajax Call end.

Show content on hover

<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3"href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
What would the code be so when I hover over an <a> it will display the <h2>? So .3 would display .1?
This is what I've tried so far:
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$(this).children('.h2').show();
},
function() {
$(this).children('h2').hide();
}
);
});
</script>

This is an example for your test case, you should improve it for your live app.
JSFiddle link: click here
$(document).ready(function(){
$("#side h2").hide();
$("#side ul li a").mouseover(function() {
if($(this).hasClass("3")) {
$("#side h2.1").show();
} else if($(this).hasClass("4")) {
$("#side h2.2").show();
}
}).mouseout(function() {
if($(this).hasClass("3")) {
$("#side h2.1").hide();
} else if($(this).hasClass("4")) {
$("#side h2.2").hide();
}
});
})
JSFiddle link: click here

<style>
.1{
display: none;
}
</style>
<script>
document.querySelector('.3').onmouseover = function(){
document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
document.querySelector('.1').style.display = 'none';
};
</script>
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
Instead of document.querySelector('.3') you can use document.getElementsByClassName('3')[0]

You are gonna use eq()
If I understood it right, you need your first item from your ul, open the first header. the second item, open the second header, etc.
eq() Get the supplied index that identifies the position of this element in the set.
Here is the Fiddle
HTML
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="#">3</a></li>
<li><a class="4" href="#">4</a></li>
</ul>
</div>​
jQuery
$(document).ready(function(){
$('#side a').on('click', function(){
var index = $('#side a').index(this);
// alert(index);
alert($('#side h2').eq(index).html());
});
});
​
NOTE: Difference between eq and :nth-child
EIDT: as you ask for hover, you can do this.
$(document).ready(function(){
$('#side a').on('hover', function(){
var index = $('#side a').index(this);
// alert(index);
// alert($('#side h2').eq(index).html());
$('#side h2').eq(index).toggle();
});
});

<div id="side">
<h2 class="one">What Have You Tried?</h2>
<h2 class="two">2</h2>
<ul>
<li><a class="three"href="">3</a></li>
<li><a class="four" href="">4</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$("#side").find('.one').show();
},
function() {
$("#side").find('.one').hide();
}
);
});
</script>
http://jsfiddle.net/VdFxf/1/