links

<!DOCTYPE html>
<html>
<head>

<title>Links</title>

<style type="text/css">
li > ul {
  display: none;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
$("ul > li").has("> ul").click(function(e) {
  e.stopPropagation();
  $(this).find("> ul").slideToggle();
  $(this).siblings("li").find("> ul").slideUp();
});
$("ul > li").click(function(e) {
  e.stopPropagation();
});
</script>

</head>
<body>
<ul>
  <li>
    <span>value 1</span>
    <ul>
      <li>
        <span>inner value 1</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
      <li>
        <span>inner value 2</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
      <li>
        <span>inner value 3</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span>value 2</span>
    <ul>
      <li>inner value 1</li>
      <li>inner value 2</li>
      <li>inner value 3</li>
    </ul>
  </li>
  <li>
    <span>value 3</span>
    <ul>
      <li>inner value 1</li>
      <li>inner value 2</li>
      <li>inner value 3</li>
    </ul>
  </li>
</ul>

 </body>
 </html>