I have a UL in one div and an a-z list in another div. When I click a letter, d for example the list will jump to the first item starting with d.
I have it roughly working, but need some help to iron out the bugs. It doesn't always go to the item I'm looking for. If I click w for example it jumps to m and if I click w again it jumps to j. If I keep clicking w it will jump back and forth between m and j. It seems much worse as it gets toward the bottom of the list. I need to use className, not id as this is an auto generated list. Any help would be much appreciated. I'm very new to javascript and can't figure it out.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="file:///c:/media/jquery-3.1.1.min.js"></script>
<style>
#container {width: 100%;}
#leftbox {float: left; width: 30%;}
#rightbox {float: right; width: 60%; border: solid 1px #000000; height:
200px; overflow: scroll;}
</style>
</head>
<body>
<div id="container">
<div id="leftbox">
<a class="playalpha" href="a">A</a>
<a class="playalpha" href="b">B</a>
<a class="playalpha" href="c">C</a>
<a class="playalpha" href="d">D</a>
<a class="playalpha" href="e">E</a>
<a class="playalpha" href="f">F</a>
<a class="playalpha" href="g">G</a>
<a class="playalpha" href="h">H</a>
<a class="playalpha" href="i">I</a>
<a class="playalpha" href="j">J</a>
<a class="playalpha" href="k">K</a>
<a class="playalpha" href="l">L</a>
<a class="playalpha" href="m">M</a>
<a class="playalpha" href="n">N</a>
<a class="playalpha" href="o">O</a>
<a class="playalpha" href="p">P</a>
<a class="playalpha" href="q">Q</a>
<a class="playalpha" href="r">R</a>
<a class="playalpha" href="s">S</a>
<a class="playalpha" href="t">T</a>
<a class="playalpha" href="u">U</a>
<a class="playalpha" href="v">V</a>
<a class="playalpha" href="w">W</a>
<a class="playalpha" href="x">X</a>
<a class="playalpha" href="y">Y</a>
<a class="playalpha" href="z">Z</a>
<script type="text/javascript">
$('.playalpha').click(function (e) {
e.preventDefault();
var letter = $(this).attr('href');
//scroll to first h1.name element that begins with "letter"
var target = $('.play').filter(function () {
return $.trim($(this).text()).toLowerCase().indexOf(letter) == 0
});
$('html,body,div').animate({scrollTop: $(target).offset().top}, 400);
});
</script>
</div>
<div id="rightbox">
<ul>
<li class="play">a1</li>
<li class="play">a2</li>
<li class="play">a3</li>
<li class="play">b1</li>
<li class="play">b2</li>
<li class="play">b3</li>
<li class="play">c1</li>
<li class="play">c2</li>
<li class="play">c3</li>
<li class="play">d1</li>
<li class="play">d2</li>
<li class="play">d3</li>
<li class="play">e1</li>
<li class="play">e2</li>
<li class="play">e3</li>
<li class="play">f1</li>
<li class="play">f2</li>
<li class="play">f3</li>
<li class="play">g1</li>
<li class="play">g2</li>
<li class="play">g3</li>
<li class="play">h1</li>
<li class="play">h2</li>
<li class="play">h3</li>
<li class="play">i1</li>
<li class="play">i2</li>
<li class="play">i3</li>
<li class="play">j1</li>
<li class="play">j2</li>
<li class="play">j3</li>
<li class="play">k1</li>
<li class="play">k2</li>
<li class="play">k3</li>
<li class="play">l1</li>
<li class="play">l2</li>
<li class="play">l3</li>
<li class="play">m1</li>
<li class="play">m2</li>
<li class="play">m3</li>
<li class="play">n1</li>
<li class="play">n2</li>
<li class="play">n3</li>
<li class="play">o1</li>
<li class="play">o2</li>
<li class="play">o3</li>
<li class="play">p1</li>
<li class="play">p2</li>
<li class="play">p3</li>
<li class="play">q1</li>
<li class="play">q2</li>
<li class="play">q3</li>
<li class="play">r1</li>
<li class="play">r2</li>
<li class="play">r3</li>
<li class="play">s1</li>
<li class="play">s2</li>
<li class="play">s3</li>
<li class="play">t1</li>
<li class="play">t2</li>
<li class="play">t3</li>
<li class="play">u1</li>
<li class="play">u2</li>
<li class="play">u3</li>
<li class="play">v1</li>
<li class="play">v2</li>
<li class="play">v3</li>
<li class="play">w1</li>
<li class="play">w2</li>
<li class="play">w3</li>
<li class="play">x1</li>
<li class="play">x2</li>
<li class="play">x3</li>
<li class="play">y1</li>
<li class="play">y2</li>
<li class="play">y3</li>
<li class="play">z1</li>
<li class="play">z2</li>
<li class="play">z3</li>
</ul>
</div>
</div>
</body>
</html>
JSfiddle example
Here is the solution.
Try href with '#id'
No need to use javascript/jQuery.
https://jsfiddle.net/mmghori/9y1saarc/
<body>
<div id="container">
<div id="leftbox">
<a class="playalpha" href="#a">A</a>
<a class="playalpha" href="#b">B</a>
<a class="playalpha" href="#c">C</a>
<a class="playalpha" href="#d">D</a>
<a class="playalpha" href="#e">E</a>
<a class="playalpha" href="#f">F</a>
<a class="playalpha" href="#g">G</a>
<a class="playalpha" href="#h">H</a>
<a class="playalpha" href="#i">I</a>
<a class="playalpha" href="#j">J</a>
<a class="playalpha" href="#k">K</a>
<a class="playalpha" href="#l">L</a>
<a class="playalpha" href="#m">M</a>
<a class="playalpha" href="#n">N</a>
<a class="playalpha" href="#o">O</a>
<a class="playalpha" href="#p">P</a>
<a class="playalpha" href="#q">Q</a>
<a class="playalpha" href="#r">R</a>
<a class="playalpha" href="#s">S</a>
<a class="playalpha" href="#t">T</a>
<a class="playalpha" href="#u">U</a>
<a class="playalpha" href="#v">V</a>
<a class="playalpha" href="#w">W</a>
<a class="playalpha" href="#x">X</a>
<a class="playalpha" href="#y">Y</a>
<a class="playalpha" href="#z">Z</a>
</div>
<div id="rightbox">
<ul>
<li id="a" class="play">a1</li>
<li class="play">a2</li>
<li class="play">a3</li>
<li id="b" class="play">b1</li>
<li class="play">b2</li>
<li class="play">b3</li>
<li id="c" class="play">c1</li>
<li class="play">c2</li>
<li class="play">c3</li>
<li id="d" class="play">d1</li>
<li class="play">d2</li>
<li class="play">d3</li>
<li id="e" class="play">e1</li>
<li class="play">e2</li>
<li class="play">e3</li>
<li id="f" class="play">f1</li>
<li class="play">f2</li>
<li class="play">f3</li>
<li id="g" class="play">g1</li>
<li class="play">g2</li>
<li class="play">g3</li>
<li id="h" class="play">h1</li>
<li class="play">h2</li>
<li class="play">h3</li>
<li id="i" class="play">i1</li>
<li class="play">i2</li>
<li class="play">i3</li>
<li id="j" class="play">j1</li>
<li class="play">j2</li>
<li class="play">j3</li>
<li id="k" class="play">k1</li>
<li class="play">k2</li>
<li class="play">k3</li>
<li id="l" class="play">l1</li>
<li class="play">l2</li>
<li class="play">l3</li>
<li id="m" class="play">m1</li>
<li class="play">m2</li>
<li class="play">m3</li>
<li id="n" class="play">n1</li>
<li class="play">n2</li>
<li class="play">n3</li>
<li id="o" class="play">o1</li>
<li class="play">o2</li>
<li class="play">o3</li>
<li id="p" class="play">p1</li>
<li class="play">p2</li>
<li class="play">p3</li>
<li id="q" class="play">q1</li>
<li class="play">q2</li>
<li class="play">q3</li>
<li id="r" class="play">r1</li>
<li class="play">r2</li>
<li class="play">r3</li>
<li id="s" class="play">s1</li>
<li class="play">s2</li>
<li class="play">s3</li>
<li id="t" class="play">t1</li>
<li class="play">t2</li>
<li class="play">t3</li>
<li id="u" class="play">u1</li>
<li class="play">u2</li>
<li class="play">u3</li>
<li id="v" class="play">v1</li>
<li class="play">v2</li>
<li class="play">v3</li>
<li id="w" class="play">w1</li>
<li class="play">w2</li>
<li class="play">w3</li>
<li id="x" class="play">x1</li>
<li class="play">x2</li>
<li class="play">x3</li>
<li id="y" class="play">y1</li>
<li class="play">y2</li>
<li class="play">y3</li>
<li id="z" class="play">z1</li>
<li class="play">z2</li>
<li class="play">z3</li>
</ul>
</div>
</div>
</body>
Related
In my menu I would like to add an active class to one of my elements: li.nav-item
and this only if the child item: ul.nav-collapse.li has the active class.
for this I made a script that works but it adds the active class to all elements: li.nav-intem
I would like it to select only the relevant parent: li.nav-item
which contains the active class ul.nav-collapse.li.active
JS
$('ul.nav-collapse li').each(function(){
if($(this).hasClass('active')) {
$(this).parent().parent().parent().parent().find('li.nav-item').addClass("active");
}
});
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
I would like something like this
<ul>
<li class="nav-item active">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
any idea?
Check if current element has class "active"
Use closest to get parent element with specific class :
https://api.jquery.com/closest/
Then add class to the current element
$('ul.nav-collapse li').each(function() {
// if current item has class active
if ($(this).hasClass("active")) {
// add class to the current clicked element
$(this).closest('.nav-item').addClass("active");
}
});
.nav-item.active { border:1px solid red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
Currently I have the list below which needs to update the iFrame inside of an existing div.
<div class="stream">
<iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
The above portion is the iFrame we need to update, the below portion is the list of streams we have to choose from on click.
<ul>
<li class="anime">
<a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
"1">Vidstreaming<span>Choose this server</span></a>
</li>
<li class="vidcdn">
<a class="" data-video="https://someexamplewebsite.com" href="#" rel="100">Vidcdn<span>Choose
this server</span></a>
</li>
<li class="streamango">
<a data-video="https://someexamplewebsite.com" href="#" rel="12">Streamango<span>Choose this server</span></a>
</li>
<li class="rapidvideo">
<a data-video="https://someexamplewebsite.com" href="#" rel="21">Rapidvideo<span>Choose this server</span></a>
</li>
<li class="estram">
<a data-video="https://someexamplewebsite.com" href="#" rel="7">Estream<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="16">Oload<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="5">OpenUpload<span>Choose this server</span></a>
</li>
<li class="mp4">
<a data-video="https://someexamplewebsite.com" href="#" rel="3">Mp4Upload<span>Choose this server</span></a>
</li>
</ul>
I am wondering how we can make this work easily, and in a way that if the a has a class of active then the iframe is updated with that portions data-video then unsetting the default active on click of another a href
<div class="stream">
<iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>
<ul>
<li class="anime">
<a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
"1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
</li>
<li class="vidcdn">
<a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
this server</span></a>
</li>
<li class="streamango">
<a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
</li>
<li class="rapidvideo">
<a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
</li>
<li class="estram">
<a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
</li>
<li class="mp4">
<a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
</li>
</ul>
<script>
function changeSource(e){
var t = e.getAttribute("data-video");
document.getElementById("iFrameElement").src=t;
}
</script>
<div class="stream">
<iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>
<ul>
<li class="anime">
<a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
"1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
</li>
<li class="vidcdn">
<a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
this server</span></a>
</li>
<li class="streamango">
<a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
</li>
<li class="rapidvideo">
<a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
</li>
<li class="estram">
<a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
</li>
<li class="mp4">
<a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
</li>
</ul>
<script>
function changeSource(e){
var t = e.getAttribute("data-video");
document.getElementById("iFrameElement").src=t;
var eSet = document.getElementsByTagName("a");
var i = 0;
while(i < eSet.length){
eSet[i].className = "";
i++;
}
e.className = "active";
}
</script>
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 -->
i want to create a dropdown menu with nested submenu so that when users over on a submenu it should display its dropdown list and when the mouse is taken out of the submenu it should hide its dropdown list. i have tried but it works only with on click() method but i want to use on hover(). here is my code
html
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="design/img/logo.png" alt="logo"></a>
<h6><small>Some text</small></h6>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="main-navigation">
<li class="">Accueil</li>
<li class="dropdown">
Groupe Cible <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1" href="#">Cible Etudes & Conseils <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1">Qui Sommes Nous <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li>Cible Etudes/Conseil</li>
<li>Notre Vision</li>
<li>Notre Mission</li>
<li>Nos Valeurs</li>
<li>Notre Force</li>
<li>Nos Filiales</li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" href="#" data-toggle="dropdown">Notre Offre </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Enquêtes et Sondage</a>
<ul class="dropdown-menu">
<li><a tabindex="0">procédures Qualité</a></li>
<li>Méthodes</li>
<li><a tabindex="0">outils de Collecte</a></li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Etudes</a>
<ul class="dropdown-menu">
<li class="test" class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Marketing</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Marché</a></li>
<li><a tabindex="0">Consommateurs</a></li>
<li><a tabindex="0">Stratégie Marketing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" class="test" href="<?=url::site('fr/a_propos/14/development')?>" tabindex="0" data-toggle="dropdown">Développement</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Impact environnemental</a></li>
<li><a tabindex="0">Développement Urbain et Local</a></li>
<li><a tabindex="0">Assainissement</a></li>
<li><a tabindex="0">Evaluation des projets et programmes</a></li>
</ul>
</li>
<li><a tabindex="0">Moyens Logistiques</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">Le Conseil</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Conseil en Marketing</a></li>
<li><a tabindex="0">Conseil en Gestion</a></li>
<li><a tabindex="0">Recherche de Financement</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">La Formation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Formation en Vente</a></li>
<li><a tabindex="0">Formation en Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu" >
<li>Cameroun</li>
<li>Afrique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
<!-- =========================== cible RH ============================== -->
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Cible RH Emploi</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Qui Sommes Nous </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Cible RH Emploi</a></li>
<li><a tabindex="0">Notre Vision</a></li>
<li><a tabindex="0">Notre Mission</a></li>
<li><a tabindex="0">Nos Valeurs</a></li>
<li><a tabindex="0">Notre Force</a></li>
<li><a tabindex="0">Nos Filiales</a></li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li >Notre Offre </li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Afique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" href="" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown <?=(!empty($service))?"active":""?>">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li class="dropdown <?=(!empty($client))?"active":""?>">
Clients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>MTN</li>
<li>Apple</li>
</ul>
</li>
<li class="dropdown <?=(!empty($equipe))?"active":""?>">
Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Mark</li>
<li>John</li>
</ul>
</li>
<li class="dropdown <?=(!empty($partenaire))?"active":""?>">
Partners <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Bootstrap</li>
<li>Ubuntu</li>
</ul>
</li>
<li class="dropdown <?=(!empty($actualite))?"active":""?>">
News <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Perl</li>
<li>Python</li>
</ul>
</li>
<li class="dropdown <?=(!empty($project))?"active":""?>">
Projects <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Java</li>
<li>Ajax</li>
</ul>
</li>
<li class="dropdown <?=(!empty($contact))?"active":""?>">
Contacts <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Contact Cible Etudes/Conseils</li>
<li>Contact Cible RH</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
then my jquery
$('a.test + ul').css("display","none");
$('.dropdown-submenu').css("position","relative");
$('.dropdown-submenu .dropdown-menu').css({"top": "0","left": "100%","margin-top": "-1px"});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
please help me! Thanks.
You can do this by simply using CSS like follows-
.dropdown-submenu:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
Working fiddle here
I am bound by a menu embed in a CMS (dont have source code), so this is what the menu looks like
<li class="dir dgn-root Item-2">
<span>Menu1</span><div class="mega_submenu Column2 Column3" style="display: none;">
<ul class="mega_submenu_ul">
<li>
<ul>
<li class=" first-item SunItem-1">
<a href="#" title="Templates">
<span>Templates</span>
</a>
</li>
<li class=" SunItem-2">
<a href="#" title="Questions and Answers">
<span>Questions and Answers</span>
</a>
</li>
<li class=" SunItem-3">
<a href="#" title="Template Package">
<span>Template Package</span>
</a>
</li>
<li class=" SunItem-4">
<a href="#" title="Silver Package">
<span>Silver Package</span>
</a>
</li>
</ul>
</li>
<li>
<ul>
<li class=" SunItem-5">
<a href="#" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="#" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="#" title="Features">
<span>Features</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="#" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
What I need to try and do is
This is what it looks like now:
<li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
But I need to have Jquery or javascript insert a few HTML elements before this, so it looks like:
</li></ul><li><ul>
so it will look like this:
</li></ul><li><ul><li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
Any help is appreciated, I have tried
$(document).ready(function(){
$("img").before("<ul><li><b>Before</b></li></ul>");
});
But this does not seem to work, I have also tried this
<script>
(function() {
var lastItem = $("li.SunItem-8");
var currentList = lastItem.closest('ul');
var newList = $("</ul></li><li><ul>");
newList.insertAfter(currentList);
newList.append(lastItem);
})();
</script>
This seem to duplicate the text and does not actually form the HTML tags as expected - the html output looks like this once inserting the above script.
<li>
<ul>
<li class=" SunItem-5">
<a href="http://gentex/website-packages/gold-package.aspx" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="http://gentex/website-packages/platinum-package.aspx" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="http://gentex/website-packages/cms-features.aspx" title="CMS Features">
<span>CMS Features</span>
</a>
</li>
</ul>
<li>
<ul>
</ul>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</li>
</li>
You are not working with html, you can not just insert tags. You will need to remove() the element and append a the new list with that element.
var lastItem = $("li.SunItem-8");
var parent = lastItem.parent();
lastItem.remove();
var newUL = $("<ul>").append(lastItem);
parent.after(newUL);