There is such a structure:
& lt; ul & gt;
& lt; li & gt; & lt; / li & gt;
& lt; ul & gt; & lt; / ul & gt;
& lt; li & gt; & lt; / li & gt;
& lt; ul & gt; & lt; / ul & gt;
& lt; / ul & gt;
How to write jquery script to hide and reveal li & gt; ul
What I have now:
$ (document) .ready (function () {
$ ('ul'). click (function (event) {
$ (this) .children ("ul"). slideToggle ();
event.stopPropagation ();
});
});
It accordingly opens all children of the previous ul .
Answer 1, authority 100%
you have the wrong html structure – in li you need to wrap sub ul
$ (document) .ready (function () {
$ ('# list & gt; li'). click (function (event) {
$ (this) .children ("ul"). slideToggle ();
event.stopPropagation ();
});
}); # list {
}
#list & gt; li {
}
#list & gt; li & gt; ul {
display: none;
} & lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/1.8.3/jquery.min.js"></script>
& lt; ul id = "list" & gt;
& lt; li & gt; list 1
& lt; ul & gt;
& lt; li & gt; sublist & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; list 2
& lt; ul & gt;
& lt; li & gt; sublist & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; / ul & gt;