I'm new on jquery. I have a list with sub list. I want to apply expand/collapse function to all of them.
html:
<ul class="tree-child">
<li class="link">
<span>folderrename</span>
<ul>
<li class="link">
<span>TR</span>
<ul>
<li class="link">
<span>Test</span>
</li>
</ul>
</li>
<li class="link">
<span>movefolder</span>
</li>
<li class="link">
<span class="">Rel 7.60_SOLASE</span>
</li>
<li class="link">
<span>TestStdFolder1</span>
</li>
</ul>
</li>
</ul>
I want to expand/collapse on <span>folderrename</span> on click with + and - icon. For icon I use font awesome.
Reference Fiddle.
How to do this?
You could use slideToggle() :
$('#folder_rename').on('click',function(){
$(this).next('ul').slideToggle();
})
Hope this helps.
$('span').on('click',function(){
$(this).next('ul').slideToggle();
$(this).find('i').toggleClass('fa-minus fa-plus');
})
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="tree-child">
<li class="link">
<span id='folder_rename'>
<i class="fa fa-minus"></i>
folderrename</span>
<ul>
<li class="link">
<span><i class="fa fa-minus"></i>TR</span>
<ul>
<li class="link">
<span>Test</span>
</li>
</ul>
</li>
<li class="link">
<span>movefolder</span>
</li>
<li class="link">
<span class="">Rel 7.60_SOLASE</span>
</li>
<li class="link">
<span>TestStdFolder1</span>
</li>
</ul>
</li>
</ul>
Related
I am trying to check each instance of .menu-section to see if the .menu-title div contains a h3 title. If it does then it should output the appropriate console.log message. I can't figure out where I am going wrong as logically it seems to make sense to me. Any help would be awesome.
$(".menu-section").each(function() {
if ($('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
Working CodePen: https://codepen.io/nickelse/pen/zQExRd?editors=1111
The problem is because you're looking at all .menu-title elements in the each() loop, not just the one within the current .menu-section element. You need to use the this keyword to reference the current element, then find() the element you're looking for:
$(".menu-section").each(function() {
if ($(this).find('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.
What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is
under the menu item clicked. Is there any way to do that without having to specify id?
Below is my menu:
$('.menu-item').on('click', function() {
$('.dropdown-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
you need to use children() function to toggle the children of particular DOM
so use $(this).children("ul").toggle(); to accomplish what you are looking for
$('.menu-item').on('click', function() {
$(this).children("ul").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'>
<span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.
$('.menu-item').on('click', function() {
$(this).find(".dropdown-content").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
I have a sidebar in body and also I have a content section in body. You can think
<aside class="sidebar-left-collapse">
Logo
<div class="sidebar-links">
<div class="link-yellow selected">
<a href="katalog/camgurubu.html">
KAPAK
</a>
</div>
<div class="link-blue">
<a href="katalog/cam2.html">
CAM GURUBU
</a>
<ul class="sub-links">
<li>Paşabahçe</li>
</ul>
</div>
<div class="link-red">
<a href="#">
PORSELEN GURUBU
</a>
<ul class="sub-links">
<li>KÜTAHYA PORSELEN</li>
<li>BONNA PORSELEN</li>
</ul>
</div>
<div class="link-yellow">
<a href="#">
ÇATAL/KAŞIK/BIÇAK
</a>
<ul class="sub-links">
<li>ARYILDIZ ÇATAL/KAŞIK/BIÇAK</li>
<li>ŞEHZADE ÇATAL/KAŞIK/BIÇAK</li>
<li>ALMOND ÇATAL/KAŞIK/BIÇAK</li>
<li>NARİN ÇATAL/KAŞIK/BIÇAK</li>
</ul>
</div>
<div class="link-green">
<a href="#">
MUTFAK SET ÜSTÜ MALZEMELERİ
</a>
<ul class="sub-links">
<li>DOLLY PLASTİK ÜRÜNLER</li>
<li>PİRGE BIÇAKLARI</li>
<li>VİCTORİNOX BIÇAKLARI</li>
<li>İTHAL MALZEME SET ÜSTÜ GRUBU</li>
<li>BORA SAKLAMA KABI VE DİĞER MALZEMELER</li>
<li>TÜRKAY POLİETİLEN GRUPLARI</li>
<li>CAMBRO ÜRÜNLERİ</li>
<li>PLASTİK,POLİKARBON MALZEMELER</li>
<li>KÜLSAN (THERMOSET MALZEMELER)</li>
<li>NARİN SET ÜSTÜ MALZEMELERİ</li>
<li>ARYILDIZ SET ÜSTÜ MALZEMELER</li>
<li>ALTINBAŞAK TEFLON TAVALAR,FAJİTA GRUPLARI, SET ÜSTÜ ÜRÜNLER</li>
<li>TEL KEVGİR, SÜZGEÇ, ÇIRPICI ÜRÜNLER GURUBU</li>
<li>KEPÇE, KEVGİR, SPATULA, MAŞA SERVİS GRUPLARI</li>
<li>TRİBECA ÜRÜN GRUPLARI</li>
<li>ALKAN-ZİCCO ÜRÜN GRUPLARI</li>
<li>ÇÖP KOVALARI</li>
<li>TENCERELER</li>
<li>KAÇAROLA/KÜVETLER</li>
<li>DERİ ÜRÜNLERİ VE MENÜLER</li>
<li>PİZZA TAVALARI</li>
<li>FIRIN KÜREKLERİ</li>
</ul>
</div>
<div class="link-green">
<a href="#">
AÇIK BÜFE EKİPMANLARI
</a>
<ul class="sub-links">
<li>İTHAL AÇIK BÜFE MALZEMELERİ</li>
<li>CHAFİNG DISH</li>
<li>BORA AÇIK BÜFE ÜRÜNLER</li>
<li>ALKAN-ZİCCO AÇIK BÜFE ÜRÜN GRUPLARI</li>
<li>GÜREN METAL AÇIK BÜFE ÜRÜNLERİ</li>
<li>KÜLSAN AÇIK BÜFE ÜRÜNLER</li>
</ul>
</div>
<div class="link-green">
<a href="#">
PASTAHANE EKİPMANLARI
</a>
<ul class="sub-links">
<li>ARYILDIZ PASTAHANE ÜRÜNLERİ</li>
<li>PASTA,KEK KALIPLARI ALÜMİNYUM MALZEMELER</li>
</ul>
</div>
<div class="link-green">
<a href="#">
GENEL MALZEME GRUBU
</a>
<ul class="sub-links">
<li>PLASTİK TAŞIMA EKİPMANLARI VE AKSESUARLARI</li>
<li>KAHVE MAKİNALARI </li>
<li>AHŞAP SERVİS EKİPMANLARI</li>
</ul>
</div>
<div class="link-green">
<a href="#">
CİHAZLAR
</a>
<ul class="sub-links">
<li>
<div class="link-green">
<a href="#">
HAZIRLIK
</a>
<ul class="sub-links">
<li> Arda </li>
<li> Zaman </li>
<li> Deneme</li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KAFETERYA CİHAZLARI
</a>
<ul class="sub-links">
<li> Arda </li>
<li> Zaman </li>
<li> Deneme</li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
BULAŞIKHANE
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 600 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 700 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 900 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KONVEKSİYONLU FIRINLAR
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
SOĞUTMA EKİPMANLARI
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEŞHİR ÜRÜNLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
RAF ÜRÜNLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEZGAH/DAVLUMBAZ/YER SÜZGEÇLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
ÇAMAŞIRHANE GRUBU
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
İTHAL ÜRÜNLER
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</aside>
<div class="main-content">
<div class="menu">
<section id="content">
</section>
</div>
</div>
When I update content section with ajax dropdown menu doesn't work. I think the problem is, menu selected class unchanged because ajax refresing page.
var links = $('.sidebar-links > div');
var links2 = $('.sidebar-links > div > ul.sub-links > li > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
links2.on('click', function () {
links2.removeClass('selected');
$(this).addClass('selected').show();
});
$('.sidebar-links div a').on('click' ,function(){
var yol = $(this).attr('href');
$(this).attr("href", "#");
$.ajax({
async: true,
type: "GET",
url: yol,
success: function (html) {
$("#content").html(html);
}
});
});
I am trying to create previous parent and grandparent level text as object using function
For example on element grandchild11
<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>
I am facing issue in creating object for attribute parobj as shown above for every anchor tag and I have even tried adding class with levels but failing to get exact output
is there anyway to get parobj as mentioned above either by hover or clicking anchor tag?
Codepen URL for reference:
http://codepen.io/divyar34/pen/bqMaQY
HTML:
$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call
function getParent(val) {
var obj = [val];
obj.push($(val).parent().text());
return obj
}
function getOther(val) {
//just for reference, but originaly using internal api
$.get('otherinfo.html', {
option: val
}, function(data) {
console.log(data);
return data.name
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-1">Parent1
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-9"> <a class="level-10" href="#">Child1</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-9"> <a class="level-10" href="#">Child2</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
<li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent1 -->
<div class="level-1">Parent2
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-7"> <a class="level-8" href="#">Child1</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-7"> <a class="level-8" href="#">Child2</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
<li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent2 -->
is there any easy way to add Li from jquery in below structure
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66" >
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
i want to add below li after FAQ
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
I have tried below but it is addind in all li's
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().html('<li> Menu 5 </li>');
Use after() to insert after an element
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
or you can use append() for appending content
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 ol").append('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
Use the After() method of JQuery:
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
Here is Fiddle for that.