How can I select elements having specific siblings? - javascript

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:void(0);">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul>
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li>
<a href="index.html">
<span>Lifestyles</span>
</a>
</li>
<li>
<a href="index.html">
<span>Technology</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.
I wanted to do that is:
if li.submenu has ul li.has-submenu a prevent default

You can write a selector for a that's a child of an li that has a submenu.
$("li:has(ul) > a").click(function(e) {
e.preventDefault();
});

Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal.
Example:
<li class="sub-menu">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
<ul>
<li>......
Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...

You can also try this.
$("li").find("ul > a").click(function(e) {
e.preventDefault();
});

Related

Activating the menu working only after two clicks

I have a menu that when I click on something the menu becomes active and is highlighted.
The code works fine, I don't know if it's a problem in the blazor or it's something in my code anyway.
But what's happening is the following, when I open the application and I click once on some of the menus nothing happens, then if I click again the menu starts to work normally with just one click
HTML Code:
<div>
<ul class="nav" onclick="ActiveTest()">
<li>
<a href="#" class="active">
<i class="fas fa-home"></i>
<span class="name">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-book-reader"></i>
<span class="name">Reader</span>
</a>
</li>
...
</ul>
</div>
JS:
function ActiveTest() {
$(".nav li a").click(function () {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
}
Anyone who has had this problem can tell me a way to make this work without this two-click issue when the app is opened
The first click you are calling ActiveTest which then adds the click event to all the <li> in your code.
You probably want something like this instead.
HTML
<div class="bar">
<ul class="nav">
<li >
<a href="#" onclick="OpenMenu(this)" class="active">
<i class="fas fa-home"></i>
<span class="name">Home</span>
</a>
</li>
<li>
<a href="#" onclick="OpenMenu(this)">
<i class="fas fa-book-reader"></i>
<span class="name">Reader</span>
</a>
</li>
</ul>
</div>
JS
function OpenMenu(el) {
$(".nav li a").removeClass("active");
$(el).addClass("active");
}

How to set active class on current nav item

I am facing problem while setting active class on nav item.
Here is my code on template
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="{{ url('/dashboard') }}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/dashboard/logo') }}" class="nav-link">
<i class="nav-icon fab fa-bandcamp"></i>
<p>
Add/Change Logo
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-image"></i>
<p>
Banner
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/dashboard/banner') }}" class="nav-link">
<i class="nav-icon fas fa-plus"></i>
<p>Add Banner</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('/dashboard/banner/edit')}}" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>Edit Banner</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
I tried
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var url = window.location;
$('ul.nav li.nav-item a[href="' + url + '"]').parent().addClass('active');
$('ul.nav li.nav-item a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
But this code setting the "active" class on list tag but not in anchor tag.
Instead of using .parent(), try using .closest('a').
closest() will traverse UP the DOM tree until it finds the specified selector - in the above example, the first <a> tag above the element.
Virtually all of your .parent() can be replaced with .closest() - but use as desired. There is no "right" or "wrong", just what works or is easiest for you.
You can use any normal css/jQuery selector with closest() - from a tagName:
.closest('a')
to a className:
.closest('a.nav-item')
etc.
Reference:
https://api.jquery.com/closest/

Adding second child to dropdown menu

Im experiencing an issue adding a second child to the drop-down-menu.
here is my html code:
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')"><i class="material-
icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li><a onclick="load('file-name')"><i class="material-
icons">apps</i>TEXT</a>
</li>
<li><a onclick="load('file-name')"><i class="material-
icons">copyright</i>Copyright</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name') class="dropdown-toggle"><i class="material-
icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
and here is my js:
jQuery(document).ready(function (e) {
$(".dropdown-toggle").click(function () {
$(this).parents(".button-dropdown").children(".dropdown-
menu").toggle().parents(".button-dropdown").children(".dropdown-
toggle").addClass("active")
});
$('.dropdown-toggle').on('click', function () {
$(this)
.find('.changed')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
Here are the styles applied for drop-down-menu:
.dropdown-menu li > a {
text-align: center;
}
.dropdown-menu li:hover > a {
background-color: #385170 !important;
color: #fff !important;
}
.changed {
margin-left: 5px;
}
I need to add another child under Menu 1 and Menu 2.
Thanks a lot for your help.
The first issue I found in your code is that you are defining the same event twice, which means that only the last one will be executed.
To append items with jQuery inside an event listener is as easy as:
Keeping code clean.
Globals at the beginning of your code:
var buttonDropdown = $(".button-dropdown");
And then your event listener for dropdown-toggle click:
$('.dropdown-toggle').on('click', function () {
buttonDropdown.append("<li>new item</li>");
});
This will append a new item to button-dropdown everytime you click dropdown-toggle.
Here is an example:
var buttonDropdown = $(".button-dropdown");
jQuery(document).ready(function (e) {
$('.dropdown-toggle').on('click', function (event) {
let itemNumber = buttonDropdown.children().length;
buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')">
<i class="material- icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li>
<a onclick="load('file-name')">
<i class="material- icons">apps</i>TEXT
</a>
</li>
<li>
<a onclick="load('file-name')">
<i class="material- icons">copyright</i>Copyright
</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name')" class="dropdown-toggle">
<i class="material- icons">assignment</i>Unit A
<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
Note: This example is made from the context you provided. If it still not solves your entire issue, feel free to edit your question and comment here so I can update mine with the requirements for your question.
And also, you did not provide any styles for your code, that's why it looks so plain.

Exclude a list item from easytabs.js

I have an unordered list with various tab items:
<nav class="navigation-area">
<ul>
<li>
<a href="#home"><i class="fa fa-home"></i>
Home</a>
</li>
<li>
<i class="fa fa-pencil"></i>Blog
</li>
<li>
<a href="#profile"><i class="fa fa-user"></i>
Profile</a>
</li>
<li>
<a href="#portfolio"><i class=
"fa fa-briefcase"></i> Portfolio</a>
</li>
<li>
<a href="#resume"><i class=
"fa fa-file-text"></i> Resume</a>
</li>
<li>
<a href="#contact"><i class=
"fa fa-envelope"></i> Contact</a>
</li>
</ul>
</nav>
I am trying to get the "Blog" element to link to a site instead of be used as a tab. however the easytabs is breaking the page as it is unable to find the referenced element in the code. How can I skip including this element in the easy tabs? The way I am initializing easytabs is like so:
$('#tab-container').easytabs({
updateHash: false
});
http://jsfiddle.net/6dqc6r4j/1/
the element LI in which is url change in SPAN tag
<span>
<i class="fa fa-pencil"></i>Blog
</span>

add/remove active class for ul list with jquery?

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
this will point to the <ul> selected by .nav-list. You can use delegation instead!
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.
I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.
In my case I have div element with same class. Now I added the active class on it using jquery check the code.
div element
<div class="previewBox" id="first_div">
...
</div>
<div class="previewBox" id="second_div">
...
</div>
<div class="previewBox" id="third_div">
...
</div>
jquery code
$(".previewBox").click(function () {
$(".previewBox.active").removeClass('active')
$(this).addClass('active')
});
css
.active {
background-color:#e9f1f5;
border-left:4px solid #024a81;
}
Demo
click_this
$(document).ready(function(){
$('.cliked').click(function() {
$(".cliked").removeClass("liactive");
$(this).addClass("liactive");
});
});
.liactive {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
className="sidebar-nav position-fixed "
style="height:450px;overflow:scroll"
>
<li>
<a className="cliked liactive" href="#">
check Kyc Status
</a>
</li>
<li>
<a className="cliked" href="#">
My Investments
</a>
</li>
<li>
<a className="cliked" href="#">
My SIP
</a>
</li>
<li>
<a className="cliked" href="#">
My Tax Savers Fund
</a>
</li>
<li>
<a className="cliked" href="#">
Transaction History
</a>
</li>
<li>
<a className="cliked" href="#">
Invest Now
</a>
</li>
<li>
<a className="cliked" href="#">
My Profile
</a>
</li>
<li>
<a className="cliked" href="#">
FAQ`s
</a>
</li>
<li>
<a className="cliked" href="#">
Suggestion Portfolio
</a>
</li>
<li>
<a className="cliked" href="#">
Bluk Lumpsum / Bulk SIP
</a>
</li>
</ul>;

Categories