while applying slideToggle function the links are not working. below is the link for my demo site.
http://codezigns.com/teyseer_laboratory/htm/toggle.html
my script is
$(".nav li > a").click(function(e) {
$(this).parent().siblings().find('ul').slideUp(500);
$(this).next('ul').stop().slideToggle(300);
return false;
});
and also include
$(".trigger").click(function(e) {
e.preventDefault();
$(".main-nav > ul").slideToggle(300);
});
Link is applied in parent item "Tutorial" and child item "Photoshop".
Remove return false; from your a click event. It is preventing redirection.
This is happening because you are returning false on a click event, you should exclude the links from returning false, you should add a class to the real links and exclude them of your function:
HTML
<nav class="nav">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li><a class="reallink" href="https://www.google.co.in/">Photoshop</a></li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
</nav>
JS:
$(".nav li > a:not(.reallink)").click(function(e) {
$(this).parent().siblings().find('ul').slideUp(500);
$(this).next('ul').stop().slideToggle(300);
return false;
});
Hope it helps
The problem is you are returning false for each a click. Try like following. Hope this will help you.
$(".nav li > a").click(function (e) {
if(this.href.indexOf('#') > -1) {
$(this).parent().siblings().find('ul').slideUp(500);
$(this).next('ul').stop().slideToggle(300);
return false;
}
});
Related
I want to add a specific class to next parent element (li) of link. For example I have active class on 'Home" tab but same time I also need 'new-class' to 'About' li.
Here is my markup
This is working for static class but when active class on link added dynamically, This is not working.
I tried this but not able to make working
$('li a').click(function() {
if ($(this).hasClass('active')) {
$(this).parent().next().addClass('active');
}
else{
$(this).parent().next().removeClass('active');
}
});
<ul>
<li><a class="active" href="">Home</a></li>
<li class="new-class">About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
I think this is what you want :
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('ul').find('a.active').removeClass('active');
$(this).closest('ul').find('li.new-class').removeClass('new-class');
$(this).addClass('active');
$(this).parent().next().addClass('new-class');
});
.active{ color:red; }
.new-class a { color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="active" href="">Home</a></li>
<li class="new-class">About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
There is next() function
$(this).parent().next().addClass('active');
However this is not what you looking for. This adds a class to li. If you want to add the class to a inside that , you need
$(this).parent().next().find("a").addClass('active');
$(this).parent().next().addClass('active');
This will first get to the li of the anchor being clicked.
Then, it will select the next element in order which be the 2nd li in case the first li is clicked and then, we add the class to that element.
If I understand you correctly (on clicking a having class active add class new-class to subsequent li?), this should work:
$('.tab a').click(function() {
if ($(this).hasClass('active')) {
$(this).parent().next().addClass('new-class');
} else{
$(this).parent().next().removeClass('new-class');
}
});
The website is http://109.74.0.128/~app/assistanstv/assistanstv/www.assistans.tv/tv.html
HTML:
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Barnasisstans</li>
<li>Intervjuer</li>
<li>Juridik</li>
<li>LSS2020</li>
<li>Resor</li>
<li>Utbildning</li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
jquery
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
the css code is too long, i cant get it work anyway. This drive me soon crazy. Whats wrong?!
Edit: Problem solved. The problem was
it was a / in the end. I solved it by deleted the last /
I think you want this:
$(document).ready(function() {
$('.toggle-nav').click(function(e) {
$('.toggle-nav').removeClass('active')
$(this).toggleClass('active');
$('.menu ul').toggleClass('active');
e.preventDefault();
});
});
CSS
.active {
background:tomato;
}
this class just a sample for showing toggling of class
updatelink of your code
Right now, I'm trying to build a vertical menu that will have a drop down sub menu below it.
Below is my HTML and the jQuery function I am using:
$(function() {
$('#menusomething > li').click(function(e) {
e.stopPropagation();
var $el = $('ul', this);
$('#menusomething > li > ul').not($el).slideUp();
$el.stop(true, true).slideToggle(400);
});
$('#menusomething > li > ul > li').click(function(e) {
e.stopImmediatePropagation();
});
});
<div id="navmenu">
<ul id="menusomething" style="padding-left:30px">
<li>HOME</li>
<li>ABOUT</li>
<li>CHAPTERS</li>
<ul class="submenu">
<li>Dallas</li>
<li>Los Angeles</li>
<li>New York</li>
<li>Northern California</li>
<li>Orange County</li>
<li>Phoenix</li>
<li>San Diego</li>
<li>Washington DC</li>
</ul>
<li>MEMBER SERVICES</li>
Figured out the answer for anyone who sees this. First had to move the closing li tag from chapters to the end of .submenu Then used this and now it works as wanted.
$(function() {
$('#menusomething li > .submenu').parent().click(function() {
var submenu = $(this).children('.submenu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(400);
} else {
$(submenu).slideUp(400);
}
});
});
The following code does what I believe you desire: Have a <ul> element that is the nextElementSibling of the first level <li> element slide open and closed when it is clicked. As you mentioned in comments that you desired, it now starts closed due to adding style="display: none;" to the <ul>.
Note: From a user interface perspective, the <li> entries which don't have sub-menus, or are otherwise links, should not have the text enclosed in <a> tags. With the <a> tags the user will think they are clickable, when a click does nothing. This is confusing to a user. It appears that you may have some be sub-menus and some be direct links. If possible, there should be some visual difference between the two types to hint to the user as to what will happen when they click.
Along with other issues, your HTML has nothing that will match either the '#menusomething > li > ul' or the '#menusomething > li > ul > li' selectors. Specifically, you have no <UL> elements that are children of <LI> elements.
$(function() {
$('#menusomething > li').click(function(e) {
e.stopPropagation();
var nextSib = this.nextElementSibling;
if(nextSib && nextSib.nodeName === 'UL') {
//If we get here the nextSib exists and is a <UL> that immediately follows
// the <LI> which was clicked.
$(nextSib).slideToggle(400);
}
});
$('#menusomething > ul > li').click(function(e) {
console.log('Clicked on chapter: ' + this.textContent);
e.stopImmediatePropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="navmenu">
<ul id="menusomething" style="padding-left:30px">
<li>HOME</li>
<li>ABOUT</li>
<li>CHAPTERS</li>
<ul class="submenu" style="display: none;">
<li>Dallas</li>
<li>Los Angeles</li>
<li>New York</li>
<li>Northern California</li>
<li>Orange County</li>
<li>Phoenix</li>
<li>San Diego</li>
<li>Washington DC</li>
</ul>
<li>MEMBER SERVICES</li>
</ul>
</div>
Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}
You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});
i'm having some trouble.
I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav>
<div class="cssmenu">
<ul>
<li class='active'><span>#Html.ActionLink("Início", "Index", "Home")</span></li>
<li><span>#Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li>
</ul>
</li>
<li><span>#Html.ActionLink("Sobre", "About", "Home")</span></li>
</ul>
</div>
</nav>
and i have this script:
<script type="text/javascript">
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active
a little help please :)
UPDATED
This is the rendered html:
<nav>
<div class="cssmenu">
<ul>
<li><span>Início</span></li>
<li><span>Tarefas Contabilidade</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>Listar clientes</span></li>
<li><span>Listar salões</span></li>
<li><span>Gerir empregados</span></li>
<li><span>Novo cliente</span></li>
<li><span>Novo salão</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>Listar registos</span></li>
<li><span>Upload novo balancete</span></li>
<li><span>Mapa Resultados/Gráfico</span></li>
<li><span>Mapas Contabilidade/Gestão</span></li>
<li><span>Análise Rentabilidade</span></li>
<li><span>Alterar taxas</span></li>
</ul>
</li>
<li><span>Sobre</span></li>
</ul>
</div>
</nav>
i dont know if i should put the javascript inside the div or something xD
Ty
You can use child selector which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li tags of the inner ul tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})
Can you try:
<script type="text/javascript">
$("li a").bind('click', function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
li items are not clickable, so you must bind the click event to a.
try
$("li").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active").end().addClass("active");
});