HTML Property Of Siblings Not Changing With JS
I believe the simplest way to explain my problem is directly running the code snippet. I'm trying to do a file tree structure. Basically I need an UL HTML element to properly chang
Solution 1:
Just use jquery methods toggle and toggleClass
function init_php_file_tree() {
$('.pft-directory a').on('click', function() {
var a = $(this)
a.toggleClass('closed');
$('ul', a.parent()).toggle();
});
};
jQuery(init_php_file_tree);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="pft-directory">
<a class="closed" href="#">Parent directory </a>
<ul style="display: none;">
<li class="pft-file ext-pdf">File Name </li>
<li class="pft-file ext-doc">Another File Name </li>
</ul>
<ul style="display: none;">
<li class="pft-directory">Directory Name </li>
<li class="pft-directory">Another Directory Name </li>
</ul>
</li>
<!-- There's a problem with your solution (and maybe with my question, sorry!). If you have more than 2 directories in the same level they all expand and collapse, no matter wich one you click -->
<li class="pft-directory">
<a class="closed" href="#">Parent directory </a>
<ul style="display: none;">
<li class="pft-file ext-pdf">File Name </li>
<li class="pft-file ext-doc">Another File Name </li>
</ul>
<ul style="display: none;">
<li class="pft-directory">Directory Name </li>
<li class="pft-directory">Another Directory Name </li>
</ul>
</li>
</ul>
</body>
</html>
Post a Comment for "HTML Property Of Siblings Not Changing With JS"