I'm trying to keep dropdown menu opened when I click on the second selector by using
$event.stopPropagation()
but it's not working as expected.
<ul class="dropdown-menu">
<li class="dropdown-header"><b>Example</b></li>
<li><a>Example 1</a></li>
<li><a onclick="$event.stopPropagation()">Example 2</a></li>
<li><a>Example 3</a></li>
<li><a>Example 4</a></li>
<li><a >Example 5</a></li>
</ul>
Please suggest is there any other way to handle this using CSS -keeping ''open' class active on click..
Try this hope it helps,thanks
$('.dropdown-menu').click(function(e){
console.log('List has been clicked')
})
$(".link").click(function(event){
event.stopPropagation();
});
.link
{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown-menu">
<li class="dropdown-header"><b>Example</b></li>
<li><a>Example 1</a></li>
<li><a class="link">Example 2</a></li>
<li><a>Example 3</a></li>
<li><a>Example 4</a></li>
<li><a >Example 5</a></li>
</ul>
Related
If I have this html code:
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
As you see there are two <li> elements with the inactive class.
I tried to do this and I have
$("#tabs").children();
But how can I search the specific <li> without class inactive?
Thanks for any help
$('#tabs li a').not('.inactive').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
</ul>
Use method .not()
Description: Remove elements from the set of matched elements.
Use :not() and :has() pseudo-class selectors.
$("#tabs").children(':has(>:not(.inactive))');
// or with a single selector
$("#tabs > :has(>:not(.inactive))");
console.log($("#tabs").children(':has(>:not(.inactive))').length);
// or with a single selector
console.log($("#tabs > :has(>:not(.inactive))").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 1 : Or without using jQuery :has() instead using parent() method.
$("#tabs > li > :not(.inactive)").parent()
console.log($("#tabs>li>:not(.inactive)").parent().length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 2 : If you just want to select the a tag then :not() is enough to get it with a single selector string.
$("#tabs > li > :not(.inactive)")
$("#tabs>li>:not(.inactive)").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
You can use .not() function
$("#tabs").find('a').not('.inactive');
You can use following code
$('ul#list li:not([class])')
in your case [class] will be inactive
By using javascript we can complete this way:-
var liWithoutHtml = document.getElementById('tabs').querySelector("li>a:not(.completed):not(.selected)");
alert(liWithoutHtml.innerHTML)
Jsfiddle link
I have been trying to crack this one out, whenever I click the link in the << li >> tag, it responds nothing.
<div id="navbar" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
<li><a class="cross-effect" href="#features">ES Values</a></li>
<li><a class="cross-effect" href="#about">About ES</a></li>
<li><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="/contact.html" target="_self">Contact ES</a></li>
</ul>
please help me out. it's from the cubicle template from w3layouts
I figured out that the problem is because those that you are clicking, they do not lead to this section page that you divided by id, the lead to another page, and this animation that you added for smooth scroll, is firing even on those links that lead to another page, so add a class to those lists that have id, for example, give class test and change your code to this:
jQuery(document).ready(function($) {
$(".scroll, .navbar li.test a, .footer li a").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
<li class="test"><a class="cross-effect" href="#features">ES Values</a></li>
<li class="test"><a class="cross-effect" href="#about">About ES</a></li>
<li class="test"><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li class="test"><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="contact.html" target="_blank" style="
pointer-events: all;
">Contact ES</a></li>
</ul>
I have a treeview structure created with css and jquery. To expand a node I want the user to click on a <span> within the <li> (it's an image) and not on the node itself.
So here is my HTML part :
<div class="tree">
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 2</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 3</a>
<ul>
<li><a>Level 4</a></li>
</ul>
</ul>
</li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
</ul>
</div>
Here's the JS part for the clikc event on span (but it doesn't work) :
$( '.tree li.parent > span.expand' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
However, the following code works but by clicking on the <a> within the <li> :
$( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
I need to expand the nodes by clicking on the span because when clicking on the node I need to redirect to another page to display its details.
Please see this jsfiddle that a created for this question.
So why the click event on span does not work ?
The issue is with css. Tag a is overlapping your span. Replace padding with margin and everything will start working.
Upd.: Actually - remove display:block from your rules for a tag
fiddle: http://jsfiddle.net/8ucy1gjb/2/
You are missing a closing </li> tag:
<div class="tree">
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 2</a>
<ul>
<li class="parent active"><span class="expand"></span><a>Level 3</a>
<ul>
<li><a>Level 4</a></li>
</ul>
</li> <!-----I Was Missing!-->
</ul>
</li>
<li><span class="expand"></span><a>Level 2</a></li>
</ul>
</li>
</ul>
</div>
Instead of using padding use margin for this class
.tree li.parent > a {
padding: 0 0 0 28px;
}
replace it with :
.tree li.parent > a {
margin: 0 0 0 28px;
}
as it is now your a tag overlays the span.expand so it's not clickable.
Fiddle
in your CSS selector you have .tree li.parent > span.expand. This selector is wrong for your markup. What this is looking for is
<div class="tree">
<ul>
<li class="parent">
<span class="expand"></span>
</li>
</ul>
</div>
That > means direct child, which you don't have. Just remove that, and you should be fine.
$(".tree li.parent span.expand").on('click', function() {});
Edit As it was pointed out to me, I missed the top level <span class="expand">. The click event would work for that top level, but wouldn't work on any of the inner ones. I would still recommend changing the CSS selector if you'd like it to click through on all of them.
I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.
You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle
If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle
<div id="wrapDesktopNavBar">
<ul class="desktopNavBar" id="accordion">
<li>
<form class="search">
<input type="text" placeholder="Search here" required>
</form>
</li>
<li><a class="firstLevel" href="#home" onclick="callthis()">Main Category 1</a></li>
<li><a class="firstLevel" href="#">Main category 2</a>
<ul>
<li><a class="secondLevel" href="#">Sub Category 1</a>
<li><a class="secondLevel" href="#">Sub Category 2</a>
<li><a class="secondLevel" href="#">Sub Category 3</a>
<li><a class="secondLevel" href="#">Sub Category 4</a>
<li><a class="secondLevel" href="#">Sub Category 5</a>
<li><a class="secondLevel" href="#">Sub Category 6</a>
</ul></li>
<li><a class="firstLevel" href="#">Main Category 3</a></li>
<li><a class="firstLevel" href="#">Main category 4</a>
<ul>...
This is my html and my javascript to get the sub categories to slide up:
$("#accordion > li").on('click', function () {
if (false == $(this).next('ul').is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next('ul').slideToggle(300);
});
but when i clicked the main category, the sub categories won't come out. it's supposed to slide out nicely like the jquery ui accordion. Please help. I'm not very sure why the sub categories are not showing.
FIDDLE
$('.firstLevel').click(function () {
$(this).next().toggle(300);
});