I wonder if users click "test 1" will add class active in sidebar anchor and add background to expand list "#bar1".
the result should be sidebar font will red, and expand list background will red
But,what I found here if I click "test 1" it wont add class to anchor.
Please is there anyone can help me to correct my code
$(document).ready(function(){
$('.sidebar li a').click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).removeClass('active');
var exId=$(this).attr('href');
$(exId).addClass('expandBg');
$(exId).siblings().removeClass('expandBg')
})
});
a.active{
text-decoration: none;
color: #f00;
}
.expandBg{
background-color:#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<div class="expand">
<ul>
<li id="bar1">bar1</li>
<li id="bar2">bar2</li>
<li id="bar3">bar3</li>
<li id="bar4">bar4</li>
</ul>
</div>
this line of code $(this).removeClass('active'); make an issue we want to remove active class from siblings anchor tag please find below snippet to know how to do that
$(document).ready(function(){
$('.sidebar li a').click(function(e){
e.preventDefault();
debugger;
$(this).addClass('active');
$(this).parent().siblings().find("a").removeClass("active")
var exId=$(this).attr('href');
$(exId).addClass('expandBg');
$(exId).siblings().removeClass('expandBg')
})
});
a.active{
text-decoration: none;
color: #f00;
}
.expandBg{
background-color:#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<div class="expand">
<ul>
<li id="bar1">bar1</li>
<li id="bar2">bar2</li>
<li id="bar3">bar3</li>
<li id="bar4">bar4</li>
</ul>
</div>
Related
I have below markup which displays submenus
<ul class="list-unstyled collapse show" id="pageSubmenu" style="">
<li>Report 1</li>
<li>Report 2</li>
<li> Report 3</li>
</ul>
Jquery to handle click event is as below
$("#pageSubmenu li a").click(function () {
$(this).children('a').trigger('click');
alert('clicked');
});
What's wrong in my code?
$("#pageSubmenu li a").click(function () {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled collapse show" id="pageSubmenu" style="">
<li>Report 1</li>
<li>Report 2</li>
<li>Report 3</li>
</ul>
This question already has answers here:
How do I select all anchors with a specific href?
(7 answers)
Closed 4 years ago.
Heyo,
I'm currently trying to create a script that checks if one of the anchor-elements has a specific url. I've tryed this but it didn't work out for me at all. What am I missing?
var url = '/right_url';
if ($('a').attr('href') == url ) {
$(this).addClass('active');
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
To refer the specific element with this you have to loop through all the element so that you can check the attribute:
var url = '/right_url';
$('a').each(function(){
if ($(this).attr('href') == url ) {
$(this).addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
Though I think you do not need to use loop and use this to achieve what you want. You can simply use href attribute in the selector to add the class:
var url = '/right_url';
$(`a[href='${url}'`).addClass('active');
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
Try following
var url = 'right_url';
$('a[href='+url+']').addClass('active');
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
I have this code. When I click on any li element then the first alert it shows its value, then show its parent then again that parent and so on. I just want to show the text of the clicked li element. How can I do that?
$('#container li').on('click', function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
Your first issue is that you need to stop the proprgation of the event from the clicked li to the parent li elements. You can call stopPropagation on the passed event handler to do that.
Secondly, I assume you only want to retrieve the child text value of the li, not the text of it's descendants, in which case you would need to use contents()[0] to access it. Try this:
$('#container li').on('click', function(e) {
e.stopPropagation();
var text = $(this).contents()[0].nodeValue.trim();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>
Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
Trying to toggleClass the nearest #dropdown element using jQuery and I can't seem to find the ul. jQuery is loading fine and each element acknowledges the click.
HTML code is:
<li onclick="showDropDown()" class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 1</li>
<li>Test 3</li>
<li>Test 2</li>
</ul>
</li>
jQuery code is:
function showDropDown() {
jQuery(this).parents("li").find("ul").toggleClass('show');
}
dropdown ul is the child element of filter-button li. So you dont need to find the parent here
$(".filter-button").click(function() {
$(this).find("ul").toggleClass('show');
});
OR,
If you really need to use the inline method calling then you need to pass the current object as well,
<li onclick="showDropDown(this)" class="filter-button">
code,
function showDropDown(obj) {
jQuery(obj).find("ul").toggleClass('show');
}
If there are many UL elements as child and nextSibling, you have to write as below.
demo : https://jsfiddle.net/nigayo/Lo3yf31y/1/
[JavaScript]
$(".filter-button").click(function() {
$(this).find("ul:first").toggleClass('show');
$(this).next("ul:first").toggleClass('show');
});
[HTML]
<li class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 2</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>Test 2</li>
</ul>
</li>
<ul id="dropdown_next" class="dropdown-content">
<li>Test 2</li>
</ul>
<ul id="dropdown_next2" class="dropdown-content">
<li>Test 2</li>
</ul>
You were missing this object in the method call.
Refer the demo here.
Please find the code below:
HTML:
<ul>
<li onclick="showDropDown(this)" class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 1</li>
<li>Test 3</li>
<li>Test 2</li>
</ul>
</li>
</ul>
JS:
function showDropDown(obj) {
$(obj).find("ul").toggle();
}
I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D
I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>