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>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li> <a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a>
</li>
<li>
<a href="#">Grand Child</a>
<ul>
<li> <a href="#">Great Grand Child</a>
</li>
<li> <a href="#">Great Grand Child</a>
</li>
<li> <a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a>
</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/).