I'm working on this portfolio site of mine
http://miketest.best/
and the top right hamburger .toggleClass() doesn't fire immediately on every click. Seems to work but there's some weird delay sometimes that doesn't make it fire/toggle immediately upon each click (if at all)?
If useful this is Wordpress and using it on my custom theme.
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls"></span>
</div>
Your trigger class is .cls,but in your DOM you have don't give any visible content to click.I was added .cls to a string click me and added that .cls class some styling.
Check out this
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
.oppenned{
background:#e3e3e3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls">click me</span>
</div>
Instead of applying click on .cls try it on .open.
jQuery(document).ready(function($) {
$('.open').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
you was using click event on a non-visible span tag. That's why the click event is not working. just use any text or any element inside the span tag. Then you will get it visible. when you will on visible element it will work.
jQuery(document).ready(function($) {
$('.cls').click(function() {
console.log('fire');
$(this).parents('.open').stop().toggleClass('oppenned');
});
});
<style type="text/css">
.oppenned{
background:#e3e3e3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls">something to click me</span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME</li>
<li onclick="slideTo('slide-0')">ABOUT</li>
<li onclick="slideTo('slide-1')">SERVICES</li>
<li onclick="slideTo('slide-3')">PORTFOLIO</li>
<li onclick="slideTo('slide-4')">CONTACT</li>
</ul>
</span>
<span class="cls">something to click me</span>
</div>
Related
I am unable to target an element with an id, whenever there is a click event. It's a pretty simple solution, no idea why this isn't working out. Please help me with it.
$('ul.main-menu li').click(function(e) {
e.preventDefault();
if ($(this).siblings('li').find('a').has('#has-sub-menu')) {
alert('sub-menu')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a id="has-sub-menu" href="#">Company</a>
</li>
</ul>
so the li is not the click event, the A is.
I've also made it a class of submenu. not an ID.
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a class="has-sub-menu" href="#">Company</a>
</li>
</ul>
<script >
$('ul.main-menu li a').click(function(e) {
e.preventDefault();
if ($(this).hasClass('has-sub-menu')) {
alert('sub-menu')
}
});
</script>
You can directly add the click event on the a with the id:
$('#has-sub-menu').click(function(e) {
e.preventDefault();
alert('sub-menu');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a id="has-sub-menu" href="#">Company</a>
</li>
</ul>
This if the same column on the elements that we click
<li class="root-level">
<a href="#" class="levelentry">
MAN
<div class="level">
Back
</div>
</a>
</li>
<li class="root-level">
<a href="#" class="levelentry">
WOMAN
<div class="level">
Back
</div>
</a>
</li>
$(document).on('click', '.levelentry', function() {
$('.level', this).addClass('active');
});
But how if like this. Because the level is not within levelentry. But still one room at a root-level
<ul class="nav">
<li class="root-level">
MAN
<div class="level">
Back
</div>
</li>
<li class="root-level">
WOMAN
<span class="dont"></span>
<div class="level">
Back
</div>
</li>
<li class="root-level"> ............ (etc)
</li>
</ul>
How to use element $(this)? Is there any way other than using $(this).next()?
If i using
$(document).on('click', '.levelentry', function() {
$('.level').addClass('active');
});
So, all level to be active
Use .closest() to target root-level element then use .find() to level element
$(document).on('click', '.levelentry', function(e) {
e.preventDefault();
$(this).closest('.root-level').find('.level').addClass('active');
});
$(document).on('click', '.levelentry', function(e) {
e.preventDefault();
$(this).closest('.root-level').find('.level').addClass('active');
});
.active{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="root-level">
MAN
<div class="level">
Back
</div>
</li>
<li class="root-level">
WOMAN
<span class="dont"></span>
<div class="level">
Back
</div>
</li>
<li class="root-level"> ............ (etc)
</li>
</ul>
You can use siblings() on $(this). DEMO
$(document).on('click', '.levelentry', function() {
$(this).siblings('.level').addClass('active');
});
If you want to select only first .level you can add :first DEMO to siblings('.level:first')
I'm trying to build a mobile responsive "hamburger" menu. The html which I'm using for this is below...
.menu_closed {
color: red;
}
.menu_open {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('span.menu_closed').click(function() {
$('ul.menu').toggle('1000');
$(this).toggleClass("menu_open menu_closed");
});
</script>
<span class="menu_closed">☰</span>
<ul class="menu" id="menu">
<ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
<li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> → Betting history</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_5'>
<li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
<ul>
<li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
</li>
<li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
</li>
<li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_4'>
</ul>
<div class='bot'>
<p>twitter
<br />
facebook
</p>
</div>
</ul>
For some reason, it's not closing and opening as it should. I've no idea what's wrong.
I would be grateful if anybody could help.
Jack
$('span.menu_closed').click(function() { should reference a standard menu class, like .hamburger, not .menu_closed because if you change .menu_closed to .menu_open then .menu_closed no longer exists and you'll lose the click handler.
$(this).toggleClass("menu_open menu_closed"); should just toggle a class like open or closed. Technically what you were doing would work OK where the classname was .menu_open and you update this $.toggleClass() line to toggle the class .menu_closed, but then you end up with an element called span.menu_open.menu_closed. Better to name the menu something agnostic, then toggle whether it's open or not.
Also added cursor: pointer; to the menu to give an indication to the user that you can click the element.
Wrapped your jQuery code in $(function() {}); which will cause the page to wait to run the JS until the DOM is ready. This is needed since your JS comes before the rest of the HTML on the page.
And changed your click handler from using $.live() (deprecated) to $.on(). $.live() was deprecated in 1.7 and removed in 1.9, and jQuery advises using $.on() now to attach event handlers.
.hamburger {
color: red;
cursor: pointer;
}
.open {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.hamburger').on('click',function() {
$('ul.menu').toggle(1000);
$(this).toggleClass("open");
});
});
</script>
<span class="hamburger">☰</span>
<ul class="menu" id="menu">
<ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
<li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> → Betting history</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_5'>
<li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
<ul>
<li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
</li>
<li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
</li>
<li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_4'>
</ul>
<div class='bot'>
<p>twitter
<br />
facebook
</p>
</div>
</ul>
hey man i tried your code it's working fine here is
https://jsfiddle.net/L0vnd4ay/
I'm trying to add a button, when user click a span into a hierchical tree ul HTML elements.
This is an example:
<ul class="tree">
<li>
<span class="li_cat">Food</span>
<ul class="tree">
<li>
<span class="li_cat">Fruit</span>
<ul class="tree">
<li>
<span class="li_cat">Red</span>
<ul class="tree">
<li><span class="li_cat">Cherry</span></li>
</ul>
</li>
<li>
<span class="li_cat">Yellow</span>
<ul class="tree">
<li><span class="li_cat">Banana</span></li>
</ul>
</li>
</ul>
</li>
<li>
<span class="li_cat">Meat</span>
<ul class="tree">
<li><span class="li_cat">Beef</span></li>
<li><span class="li_cat">Pork</span></li>
</ul>
</li>
</ul>
</li>
</ul>
And the jquery code is this:
$(document).on('click', '.li_cat', function(e){
e.stopPropagation();
$(this).html($(this).html()+" <button class='btn btn-warning btn-xs'><i class='glyphicon glyphicon-pencil'></i></button>");
});
I want to display the button once, but every time I do click on add a new one, how can I solve this problem?
Set a namespace at click event attached to document to reference the click event specific to .li_cat elements. Check the element .attr("data-keyname"), if element does not have a .attr("data-keyname"), set a Boolean flag at element .attr("data-keyname"), use .html(function). Remove delegated click event at document if all .li_cat elements have .attr("data-keyname") set to true.
$(document).on('click.cat', '.li_cat', function(e) {
e.stopPropagation();
if ($(this).attr("data-clicked") === undefined) {
$(this).attr("data-clicked", true).html(function(_, html) {
return html + "<button class='btn btn-warning btn-xs'><i class='glyphicon glyphicon-pencil'>button</i></button>"
});
// if all `.li_cat` elements have `data-clicked` attribute
if ($(".li_cat[data-clicked]").length === $(".li_cat").length) {
// remove `click` event listener for `.li_cat` elements
$(document).off("click.cat")
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tree">
<li>
<span class="li_cat">Food</span>
<ul class="tree">
<li>
<span class="li_cat">Fruit</span>
<ul class="tree">
<li>
<span class="li_cat">Red</span>
<ul class="tree">
<li><span class="li_cat">Cherry</span>
</li>
</ul>
</li>
<li>
<span class="li_cat">Yellow</span>
<ul class="tree">
<li><span class="li_cat">Banana</span>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="li_cat">Meat</span>
<ul class="tree">
<li><span class="li_cat">Beef</span>
</li>
<li><span class="li_cat">Pork</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
First empty your span and then add the button as you want the button only once. Also this will make sure that any buttons added previously will be removed along with there any events.
$(document).on('click', '.li_cat', function(e){
e.stopPropagation();
var spanText = $(this).text();
$(this).empty();
$(this).append(spanText);
$(this).append("<button class='btn btn-warning btn-xs'><i class='glyphicon glyphicon-pencil'></i></button>");
});
I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.
The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
HTML
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
Here's the working code:
$("li.test a").on("click",function() {
if($(this).hasClass("active")){
$(this).removeClass("active");
} else{
$("a.active").removeClass("active");
$(this).addClass("active");
}
});
.active{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
(Working pen)
Be aware you have classes "test1" and "test2" in the HTML, but class "test" in the JS!
Use the not method to skip your current element.
$("li.test a").click(function() {
var $this = $(this);
$('.test a').not($this).removeClass('active');
$this.toggleClass("active");
});
You have to remove the class from other elements before toggling.
Try this
$("li.test a").click(function() {
$("li.test a.active").removeClass("active");
$(this).toggleClass("active");
});
This first removes all the anchors with class active and then toggles the clicked anchor with the class.
Try this.
$("li").click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
li.active a{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="test1 active">
test
</li>
<li class="test1">
test
</li>
<li class="test1">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
</ul>
Go through below mentioned link or below mentioned code may be it can help you.
JSFiddle
HTML Code
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
CSS Code
.active{
color:#00adef;
}
JAVASCRIPT Code
$("a").click(function(){
$('a').removeClass('active');
$(this).addClass("active");
});