How to hide element when click outside element? : I now there are many answer for detect click outside element. But I don't now how to hide element when click outside element in this code. In this code I add to all li element click function. This function shows child element. How can I detect click outside with prue javasctipt using FOR LOOP for hide element. I'am newbie js. Sorry my bad English.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let lis = document.querySelectorAll('li');

    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function() {
          lis[i].children[0].style.display = 'block';
        });
      }

<!-- language: lang-css -->

    ul > li > ul {
      display: none;
    }

    li {
      cursor: pointer;
    }

<!-- language: lang-html -->

    <body>
    <ul>
      <li>list</li>
      <li>list
        <ul>
          <li>list</li>
          <li>list</li>
        </ul>
      </li>
      <li>list
        <ul>
          <li>list</li>
          <li>list</li>
        </ul>
      </li>
    </ul>
    </body>

<!-- end snippet -->

