how to trigger javascript function from button - javascript

i have been downloading bootstrap tree list snippet from google.
it have javascript function which look like this
<script>$(function () {
$('.tree li').on('click', function (e) {
var children = $(this).find('> ul > li');
if (children.is(":visible")) children.hide('fast');
else children.show('fast');
e.stopPropagation();
});
});</script>
because i need the tree list only show the active list, so i need to trigger it from my list, and check whether this list active or not
i had convert it to become like this, but still didnt work
function showHide(){
var children = $(this).find('> ul > li');
if (children.is(":visible")) children.hide('fast');
else children.show('fast');
e.stopPropagation();
};
and also could you explain to me what is the function of e, in function(e),and e.stopPropagation()
this is the complete code, in case someone was asking
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bootstrap-3.2.0.min.css">
<style>
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content:'';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content:'';
position: absolute;
top: 30px;
width: 25px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
border-color: #94a0b4;
}
</style>
<script src="http://snipplicious.com/js/jquery.js"></script>
<script src="http://snipplicious.com/js/bootstrap.min.js"></script>
<script>$(function () {
$('.tree li').on('click', function (e) {
var children = $(this).find('> ul > li');
if (children.is(":visible")) children.hide('fast');
else children.show('fast');
e.stopPropagation();
});
});</script>
</head>
<body>
<div class="container">
<h1>Bootstrp tree view - click to hide</h1>
<div class="tree">
<ul>
<li>
Parent
<ul>
<li>
Child
<ul>
<li> Grand Child
</li>
</ul>
</li>
<li>
Child
<ul>
<li>Grand Child
</li>
<li>
Grand Child
<ul>
<li> Great Grand Child
</li>
<li> Great Grand Child
</li>
<li> Great Grand Child
</li>
</ul>
</li>
<li>Grand Child
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
UPDATE
<?php
$num=0;
if(isset($_GET['number'])){
$num = $_GET['number'];
}
?>
<!doctype html>
<html>
<head>
<title>Simple list</title>
</head>
<body>
<ul>
<li <?php if($num==1) {echo 'class="special"';}?>>
one
<ul class="sublist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li <?php if($num==2) {echo 'class="special"';}?>>
two
<ul class="sublist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li <?php if($num==3) {echo 'class="special"';}?>>
three
<ul class="sublist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li <?php if($num==4) {echo 'class="special"';}?> >
four
<ul class="sublist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<script src="http://snipplicious.com/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('li.special').hide();
});
</script>
</body>
</html>
this is the simpler code, but method hide didnt work


The showHide() function you created can not work because it uses this like in the working jQuery on('click', function(e){}). However in your showHide() this references the window object while in
$('.tree li').on('click', function (e) {
// some code
});
this references the the object which invoced the function. And this object is a tree node which matches the selector '.tree li'.
So if you want your showHide() function to work, you need to tell it exactly on which element to perform the .find('> ul > li') and hide visible children.
You have two ways of doing so. One would be to pass the function the element's selector as parameter like so:
function showHide(elementSelector){
var children = $(elementSelector).find('> ul > li');
if (children.is(":visible")) children.hide('fast');
else children.show('fast');
};
And the other would be to 'hard code' the selector which probably isn't very practical like so
function showHide(){
var children = $('.someClass').find('> ul > li');
if (children.is(":visible")) children.hide('fast');
else children.show('fast');
};
Your element selector (elementSelector in my first example and '.someClass' in my second) needs to be a valid jQuery selector and it's up to you, to find a logic to tag your elements in a way that you can identify them with such a selector because we do not know your background logic and currently it's not easily possible to select unique nodes from your HTML as they don't have IDs. Giving them unique IDs could be a good approach to identify them.
As for your second question e is the jQuery.Event which triggered the function and e.stopPropagation() prevents any other event handlers further up to be also notified about this event (see http://api.jquery.com/event.stoppropagation/).

Related

Javascript - cannot change active element

I'm completely new to JavaScript in frontend development, and I've got a really basic question I can't seem to figure out... I'm making a tabular navigation bar where the active element is highlighted.
I know there are other ways to accomplish the desired result, but what is wrong with my script here?
function navTabsClick(child) {
getElementsByClassName("active")[0].classList.remove("active");
child.getElementsByTagName("li")[0].className = "active";
}
ul{
display: flex;
list-style-type: none;
}
a{
text-decoration: none;
}
a:link, a:visited{
color: black;
}
a:hover{
cursor: pointer;
}
li{
margin: 0;
padding: 10px 30px;
background-color: lightgray;
}
li:hover{
background-color: darkgray;
}
li.active{
background-color: red;
}
<nav>
<ul>
<a onclick="navTabsClick(this)">
<li class="active">1</li>
</a>
<a onclick="navTabsClick(this)">
<li>2</li>
</a>
<a onclick="navTabsClick(this)">
<li>3</li>
</a>
</ul>
</nav>
If I remove the top line of my JavaScript function, I can get other tabs to highlight, but as is I get the following error:
Uncaught ReferenceError: getElementsByClassName is not defined
What am I missing?
Also, as a secondary question, is there a better way to handle navbar JavaScript than this?

Try doing document.getElementByClassName
function navTabsClick(child) {
document.getElementsByClassName("active")[0].classList.remove("active");
child.getElementsByTagName("li")[0].className = "active";
}
ul{
display: flex;
list-style-type: none;
}
a{
text-decoration: none;
}
a:link, a:visited{
color: black;
}
a:hover{
cursor: pointer;
}
li{
margin: 0;
padding: 10px 30px;
background-color: lightgray;
}
li:hover{
background-color: darkgray;
}
li.active{
background-color: red;
}
<nav>
<ul>
<a onclick="navTabsClick(this)">
<li class="active">1</li>
</a>
<a onclick="navTabsClick(this)">
<li>2</li>
</a>
<a onclick="navTabsClick(this)">
<li>3</li>
</a>
</ul>
</nav>

The function is document.getElementsByClassName, i.e.:
function navTabsClick(child) {
document.getElementsByClassName("active")[0].classList.remove("active");
child.getElementsByTagName("li")[0].className = "active";
}
ul {
display: flex;
list-style-type: none;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: black;
}
a:hover {
cursor: pointer;
}
li {
margin: 0;
padding: 10px 30px;
background-color: lightgray;
}
li:hover {
background-color: darkgray;
}
li.active {
background-color: red;
}
<nav>
<ul>
<a onclick="navTabsClick(this)">
<li class="active">1</li>
</a>
<a onclick="navTabsClick(this)">
<li>2</li>
</a>
<a onclick="navTabsClick(this)">
<li>3</li>
</a>
</ul>
</nav>

You are missing the document before getElementsByClassName

Others have pointed out that getElementsByClassName must be called on an element, but that does not address the second part of your question.
Is there a better way to handle navbar JavaScript than this?
Right now, you are setting an event listener on each menu item which is unnecessary. The click event exposes the element that was clicked in the target property. You can set a single event listener on the menu itself and use this property to determine which item was clicked.
This also allows you to remove the a tags around your menu items. I assume those will cause issues with screen readers. Edit: As pointed out by Scott, the click event could have been set directly on the li tag originally.
Here's a modified example with a single event for the menu.
function navClicked(nav, item) {
/* Do not attempt to set the nav
menu itself to the active item */
if (nav === item) return;
/* Do not change the active item if the
item that was clicked is already active */
if (item.classList.contains("active")) return;
/* Remove the class from all nav items */
Array.from(nav.children)
.forEach(child => child.classList.remove("active"));
/* Add the class to the item that was clicked */
item.classList.add("active");
}
ul {
display: flex;
list-style-type: none;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: black;
}
a:hover {
cursor: pointer;
}
li {
margin: 0;
padding: 10px 30px;
background-color: lightgray;
}
li:hover {
background-color: darkgray;
}
li.active {
background-color: red;
}
<nav>
<ul onclick="navClicked(this, event.target)"> <!-- 'this' is the ul element, 'event.target' is the li element that was clicked -->
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>

Clicking Child Component closes the list that is opened

I have implemented a menu example where when i click on parent menu link all the child elements are visible inside them and when i click on any of the child element it collapses...I have made a demo here http://codepen.io/anon/pen/KzpKrm ...When i click on child link i want the list to be opened like that only and indicate that this link has been selected...Somebody please help
function showmenu(elem) {
// Clear any currently open menu
var openMenu = document.getElementById("activeMenu");
if (openMenu) {
openMenu.removeAttribute("id");
// Stop if we're just closing the current menu
if (openMenu === elem) {
return;
}
}
// Only apply it if the element actually has LI child nodes.
// OPTIONAL: Will still work without if statement.
if (elem.getElementsByTagName("li").length > 0) {
elem.setAttribute("id", "activeMenu");
}
}

Well you can add event.stopPropagation() to the nested ul:
<ul id="nav">
<li onclick="showmenu(this)" class="sectionMenu">
Service
<ul onclick="event.stopPropagation()">
<li><a> Ro </a> </li>
<li> <a>List</a> </li>
<li><a>Service Plan</a> </li>
</ul>
</li>
....
</ul>

You could check if the actual element clicked is a parent (i.e. has class sectionMenu). If not then return.
You can do this by adding the following code to your javascript:
// Checks if element clicked has class sectionMenu. Otherwise return.
var $elementClicked = event.target;
if ($elementClicked.className != 'sectionMenu')
return;
CodePen
function showmenu(elem) {
// Checks if element clicked has class sectionMenu. Otherwise return.
var $elementClicked = event.target;
if ($elementClicked.className != 'sectionMenu')
return;
// Clear any currently open menu
var openMenu = document.getElementById("activeMenu");
if (openMenu) {
openMenu.removeAttribute("id");
// Stop if we're just closing the current menu
if (openMenu === elem) {
return;
}
}
// Only apply it if the element actually has LI child nodes.
// OPTIONAL: Will still work without if statement.
if (elem.getElementsByTagName("li").length > 0) {
elem.setAttribute("id", "activeMenu");
}
}
img {
padding-left: 5px;
}
#nav {
height: 100%;
padding: 20px;
cursor: pointer;
border: 3px solid #3e4547;
box-shadow: 2px 2px 8px #000000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
ul {
width: 200px;
list-style: none;
margin: 0;
padding: 5px;
}
ul li {
display: block;
padding: 0 10px;
overflow: hidden;
padding: 5px;
}
ul ul {
display: none;
}
ul ul li {
float: none;
user-select: #b6ff00;
}
#activeMenu ul {
display: block;
}
ul li:hover {
background-color: #bcbdc1;
}
ul ul li:hover {
background-color: red;
}
.arrow {
background-image: url("./png/2.png");
transition: 0.3s;
transform: rotateX(-180deg);
}
li.sectionMenu:before {
content: '\2795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
li.sectionMenu#activeMenu:before {
content: "\2796";
}
<div>
<ul id="nav">
<li onclick="showmenu(this)" class="sectionMenu">
Service
<ul>
<li><a> Ro </a>
</li>
<li> <a>List</a>
</li>
<li><a>Service Plan</a>
</li>
</ul>
</li>
<li onclick="showmenu(this)" class="sectionMenu">
Customer
<ul>
<li>New Customer</li>
<li>customer List</li>
</ul>
</li>
<li onclick="showmenu(this)" class="sectionMenu">
Parts
<ul>
<li>New Part</li>
<li>Parts List</li>
</ul>
</li>
<li onclick="showmenu(this)" class="sectionMenu">
Admin
<ul>
<li>New Employee</li>
<li>Employee List</li>
<li>Employee Roles</li>
<li>Employee Work Schedulee</li>
<li>Holidays</li>
<li>Employee List</li>
</ul>
</li>
</ul>
</div>

Even U could try this....Remember to pass event argument for the onclick handlers
function showmenu(elem,event) {
// Clear any currently open menu
event.preventDefault();
// alert(event.currentTarget.getAttribute("id"))
var openMenu = document.getElementById("activeMenu");
if (openMenu) {
if(openMenu.children[0]==event.target.parentNode)
return;
openMenu.removeAttribute("id");
// Stop if we're just closing the current menu
if (openMenu === elem) {
return;
}
}
// Only apply it if the element actually has LI child nodes.
// OPTIONAL: Will still work without if statement.
if (elem.getElementsByTagName("li").length > 0) {
event.currentTarget.setAttribute("id", "activeMenu");
}
}
CodePen

Nav bar mouseenter/mouseleave not working between li elements

I'mm trying to design a specific type of navbar in javascript/jquery.
I cannot get mouseenter() and mouseleave() to work correctly when the mouse passes between the li objects.
Here is my code. Any ideas?
http://jsfiddle.net/richofwombwell/1v8L0pdz/38/
function inversebuttonon(liId, aId) {
$(liId).css('background-color', 'white');
$(aId).css('background-color', 'white');
$(aId).css('color', '#0086CA');
}
function inversebuttonoff(liId, aId) {
$(liId).css('background-color', '#0086CA');
$(aId).css('background-color', '#0086CA');
$(aId).css('color', 'white');
}
function showselectedmenu(liclass, aclass) {
$('.menu').css('max-height', '100px');
$(liclass).css('display', 'inline');
$(aclass).css('display', 'inline');
}
function dontshowselectedmenu(liclass, aclass) {
$('.menu').css('max-height', '0px', 'none');
$(liclass).css('display', 'none');
$(aclass).css('display', 'none');
}
$('#n-2').mouseenter(function () {
inversebuttonon('#n-2', '#a2');
showselectedmenu('.tmenuli', '.tmenua1');
});
$('.menu').mouseleave(function () {
dontshowselectedmenu('.tmenuli', '.tmenua1');
inversebuttonoff('#n-2', '#a2');
});
$('#n-3').mouseenter(function () {
inversebuttonon('#n-3', '#a3');
showselectedmenu('.tmenuli2', '.tmenua2');
});
$('.menu').mouseleave(function () {
dontshowselectedmenu('.tmenuli2', '.tmenua2');
inversebuttonoff('#n-3', '#a3');
});

Your script does not work correctly because your html code is invalid (you are nesting DIVs instead of list elements. That forces the browser to correct your code (the way it wants to).
Before you continue scripting, please consider using CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
}
.my_menu {
height: 66px;
text-align: center;
width: 100%;
overflow:
}
.my_menu ul {
list-style: none;
}
.my_menu ul li {
display: inline-block;
}
.my_menu > ul {
position: relative;
background: none #0086CA;
}
.my_menu ul a {
text-decoration: none;
color: #fff;
display: inline-block;
}
.my_menu > ul > li > a {
padding: 15px 20px;
}
.my_menu > ul > li > a:hover,
.my_menu > ul > li a:focus {
color: #0086CA;
background: #fff;
}
.my_menu ul ul {
background: none grey;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
display: none;
}
.my_menu ul li:hover ul {
display: block;
}
.my_menu ul ul a {
padding: 5px 10px;
}
.my_menu ul ul a:hover,
.my_menu ul ul a:focus {
background: none black;
}
<header>
<nav class="my_menu">
<ul>
<li>
Home
</li>
<li>
menuitem1
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</li>
<li>
menuitem2
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</li>
</ul>
</nav>
</header>
Also at Playground.

You can probably clean this up but if you insist on a script method, this will work: It also should be easier to extend with less id's etc. just add markup.
Working example here: http://jsfiddle.net/MarkSchultheiss/fLqs1nru/2/
function showmenu(targ, me) {
$('.menuitem').removeClass('menu-on');
$(me).parent().addClass('menu-on');
$('.menu').hide();
$('.' + targ).show();
}
$('.menuitem a').mouseenter(function () {
var targ = $(this).parent().data("targetmenu");
showmenu(targ, this);
});
$('nav').mouseleave(function () {
$('.menuitem ').removeClass('menu-on');
$('.menu').hide();
});
Adjust the markup, get rid of the div and add some classes. Add a data element for the target menu to use.
<nav>
<ul class="ulparent">
<li class="navitem" id="n-1">Home
<li class="navitem menuitem" data-targetmenu="menu1">menuitem1
</li>
<li class="navitem menuitem" data-targetmenu="menu2"><a href="#" >menuitem2</a>
</li>
<ul class="menu menu1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul class="menu menu2">
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</ul>
</nav>
add this to the end of you CSS (which can probably be cleaner but this is only additive:)
.menu-on {
background-color: white;
}
.menu-on a {
color:#0086CA;
}
.menu {
max-height:100px;
display:none;
}

Prevent menu from rolling up when its sub-menu is clicked

I have a vertical menu here, which in turn has primary and secondary sub-menus. When the primary or secondary sub-menu is clicked, the whole menu will be closed. I want the sub-menu to stay open when clicked.
e.g.: vertical menu > sub-menu first > sub-menu second (clicked), the page opens up and the menu stays open.
$(function () {
$('.showFirst').click(function () {
$(this).children('ul').slideToggle();
$('.showFirst').not(this).find('ul').slideUp();
e.stopPropagation();
});
$('.showSecond').click(function () {
$(this).children('ul').slideToggle("slow");
return false;
});
$('ul li ul').click(function () {
$('ul li ul li ul').slideUp();
});
$('ul li ul li ul').click(function (e) {
$("ul li ul li ul").slideUp();
$("ul li ul").slideUp();
e.stopPropagation();
});
});
ul {
list-style: none;
cursor: pointer;
}
a {
color: black;
line-height: 25px;
text-decoration: none;
}
a:hover {
color: #aaa;
text-decoration: none;
}
span.sb-caret {
width: 0px;
height: 0px;
display: inline-block;
margin: 0px 5px;
border: 5px solid transparent;
}
span.sb-caret {
/* Caret Down */
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
/* Caret Up */
border-top: 0px solid transparent;
border-bottom: 5px solid;
}
ul li > ul {
display: none;
/* border:1px solid black; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="showFirst">First<span class="sb-caret"></span>
<ul>
<li>Second
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
<li class="showFirst">First<span class="sb-caret"></span>
<ul>
<li class="showSecond">Second<span class="sb-caret"></span>
<ul>
<li>third
</li>
<li>third
</li>
</ul>
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
</ul>

I'm not sure how you're even able to keep track of all of those ul li ul... strings...but don't. That's setting yourself up to easily make mistakes if your DOM changes even slightly, or if you mistype something. Add classes to your markup to make it easier to traverse and reference elements. In this case, a distinct class for each level of <ul> would make things much easier.
Then, you simply have to be selective about which menus you collapse and when. You'll notice the only real change here is that I replaced your ul li ul... click handlers with these:
$('.tier-2').click(function (e) {
$('.tier-3').slideUp();
e.stopPropagation();
});
That code ensures that anytime a level-two list is clicked, all level-three ones collapse.
$('.tier-3').click(function (e) {
$('.tier-2, .tier-3')
.not(this)
.not($(this).closest('.tier-2'))
.slideUp();
e.stopPropagation();
});
This fragment ensures that if a level-three list is clicked, all other level-three lists collapse except this one, and all level-two lists collapse except the parent of this one.
See the full example below.
$(function () {
$('.showFirst').click(function () {
$(this).children('ul').slideToggle();
$('.showFirst').not(this).find('ul').slideUp();
e.stopPropagation();
});
$('.showSecond').click(function () {
$(this).children('ul').slideToggle("slow");
return false;
});
$('.tier-2').click(function (e) {
$('.tier-3').slideUp();
e.stopPropagation();
});
$('.tier-3').click(function (e) {
$('.tier-2, .tier-3')
.not(this)
.not($(this).closest('.tier-2'))
.slideUp();
e.stopPropagation();
});
});
ul {
list-style: none;
cursor: pointer;
}
a {
color: black;
line-height: 25px;
text-decoration: none;
}
a:hover {
color: #aaa;
text-decoration: none;
}
span.sb-caret {
width: 0px;
height: 0px;
display: inline-block;
margin: 0px 5px;
border: 5px solid transparent;
}
span.sb-caret {
/* Caret Down */
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
/* Caret Up */
border-top: 0px solid transparent;
border-bottom: 5px solid;
}
ul li > ul {
display: none;
/* border:1px solid black; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="showFirst">First<span class="sb-caret"></span>
<ul class="tier-2">
<li>Second
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
<li class="showFirst">First<span class="sb-caret"></span>
<ul class="tier-2">
<li class="showSecond">Second<span class="sb-caret"></span>
<ul class="tier-3">
<li>third
</li>
<li>third
</li>
</ul>
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
</ul>

Adding 3rd level to CSS menu

I am using very old portal where the is not defined in the begining of the html code, and also I managed to use a jquery/css horizontal drop menu, I need help adding third level to the menu here is my code
#jsddm {
margin: 0;
padding: 0
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#jsddm li a {
display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap
}
#jsddm li a:hover {
background: #24313C
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white
}
#jsddm li ul li {
float: none;
display: inline
}
#jsddm li ul li a {
width: auto;
background: #A9C251;
color: #24313C
}
#jsddm li ul li a:hover {
background: #8EA344
}
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
and here is the menu
<ul id="jsddm">
<li>About us
<ul>
<li>Mission
<ul>
<li>Mission Statment 1</li>
</ul>
</li>
<li> vision </li>
<li>status </li>
</ul>
</li>
<li> Contact
<ul>
<li>Office </li>
<li> Support </li>
</ul>
</li>
</ul>
as you can see the 3rd level "Mession Statment 1" doesn't appear, and that's my problem, any suggestion ???

The problem is maybe due to these lines
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
in which you set an event handler only to the direct <li> children of #jsddm element. But your third <ul> is not contained in a such <li>, so try to change the above lines in
$('#jsddm li').bind('mouseover', jsddm_open);
$('#jsddm li').bind('mouseout', jsddm_timer);
and
function jsddm_open() {
...
ddmenuitem = $(this).children('ul:first').css('visibility', 'visible');}

Categories