apologies but i'm fairly new to js. Basically i have the main navigation at the top (#filter), then i have 3 further lists (#one, #two and #three).
What i want to do is when clicked on All it shows all of the list items from #one, #two and #three. Then when clicked on One it only shows the list items from #one, Two from #two and Three from #three.
Here's the mark-up to help.
<ul id="filter">
<li class="current">
All
</li>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
<ul id="one">
<li>
1
</li>
<li>
1
</li>
</ul>
<ul id="two">
<li>
2
</li>
<li>
2
</li>
</ul>
<ul id="three">
<li>
3
</li>
<li>
3
</li>
</ul>
$(function() {
$('#filter a').on('click', function(e) {
e.preventDefault();
var clicked = $.trim( $(this).text().toLowerCase() );
if ( clicked == 'all' ) {
$('#one, #two, #three').show();
}else{
$('#one, #two, #three').hide();
$('#' + clicked).show();
}
$(this).closest('li')
.addClass('current')
.siblings()
.removeClass('current');
});
});
Related
I have tested this code. but there have some error. i am also attachment with JPG file what my need exactly please suggestion me.
$('.list ul li a').click(function() {
$('.list li a').removeClass("ad");
$(this).addClass("ad");
});
.ad{background-color:green;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
<div class="list">
<h4>B</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
Okay, you must create a link between A children and B children, you can set a data attribute for example data-id then find the equals with:
$('.list li a[data-id="'+dataId+'"]').addClass('ad');
$('.list ul li a').click(function() {
var dataId = $(this).attr('data-id');
$('.list ul li a').removeClass('ad');
$('.list li a[data-id="'+dataId+'"]').addClass('ad');
});
.ad {
background-color: green;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
<div class="list">
<h4>B</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
Update: on your website, use something like this:
setInterval(function() {
$('.btn-nav-main').each(function() {
if ($(this).hasClass('active')) {
var dataSlide = $(this).attr('data-slide');
$('.btn-nav-main').removeClass('gg');
$('.btn-nav-main data-slide["' + dataSlide + '"]').addClass('gg');
}
});
}, 1000);
I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.
I'm trying to make a simple dropdown menu, this is my code so far:
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JQUERY
jQuery(".activate").hover(function(){
jQuery(this).find('.subs').css("display", "block");
}, function(){
jQuery(this).find('.subs').css("display", "none");
});
When I try it on my site nothing happens, what am I doing wrong?
You currently have no elements with an .activate class because your HTML is messed up. Change:
item 1
To:
<a class="activate">item 1</a>
Once you've fixed that, you're still going to have problems as .subs isn't a descendant of .activate. You'll need to use jQuery's next() method to select the .subs element instead:
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').css("display", "block");
}), function(){
jQuery(this).next('.subs').css("display", "none");
});
try
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JS
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').show();
}, function(){
jQuery(this).next('.subs').hide();
});
DEMO
item 1
Corrected above line as:
<p class="activate" style="cursor:pointer;">item 1</p>
I am currently having a fairly classic problem in jquery. When a class is clicked (within a ul) all elements with that class name are being toggled. I really only want the the elements to toggle to be the the element that is click, here is some of my code:
js:
$(function(){
var list = $('.lists');
list.on({
'click': function(){
$('.list-display').toggle('slow');
}
});
});
html:
<ul class ='lists'>
<li> Soccer
<ul class='list-display'>
<li> Kick </li>
<li> Dribble </li>
<li> Pass </li>
</ul>
</li>
<li> Basketball </li>
<ul class='list-display'>
<li> Shoot </li>
<li> Dribble </li>
<li> Pass </li>
</ul>
<li> Baseball </li>
<ul class='list-display'>
<li> Catch </li>
<li> Throw </li>
<li> Hit </li>
</ul>
</ul>
When I click any li in the main ul (Soccer, Basketball, Baseball) all of the uls embedded in their category toggle. I only want the one clicked to toggle. How can I re arrange my function to only toggle the one clicked? I imagine I have to use the 'this' keyword but am unfamiliar with using it.
Try
list.on({
'click': function(){
$('.list-display', this).toggle('slow');
}});
I looks for .list-display items inside the currently clicked element.
Use this (Example):
$('.lists').on('click', 'li', function(){
$('ul.list-display', this).toggle('slow');
});
Also, you have wrong HTML, use something like this:
<ul class ='lists'>
<li> Soccer
<ul class='list-display'>
<li> Kick </li>
</ul>
</li>
<li> Basketball
<ul class='list-display'>
<li> Shoot </li>
</ul>
</li>
</ul>
You didn't put all uls inside li, you have two uls like this:
<li> Basketball</li>
<ul class='list-display'>
<li>...</li>
</ul>
<li> Baseball</li>
<ul class='list-display'>
<li>...</li>
</ul>
how i can get "Goods" when i click under "Goods" link "Restricted","Open" similarly when how i can get "Services" when i click under "Services" link "Restricted","Open" similarly,thanks in advance
JavaScript:
$('.goodsLink li a').click(function(){
alert( $('#nav li ul li a').html());
return false;
});
HTML:
<ul id="nav">
<li>Create a New Tender
<ul>
<li><strong>+</strong> Goods
<ul>
<li><strong>-</strong> Single
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong> Framework
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
<li><strong>+</strong> Services
<ul>
<li><strong>-</strong> Single
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong> Framework
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You can use something like this:
$('.goodsLink li a').click(function() {
alert( $(this).parents('li:contains("+")').children("a:first").text());
return false;
});
But the best way should be for you to use a class or tribute to better identify the element you want to find. That way you cold replace the :contains("+") with a .topParent
She this examples:
example with contains
example with class