Cómo cerrar el menú si el usuario hace clic en cualquier lugar de la pantalla?

BruceyBandit:

Tengo este código debajo de la cual hace lo siguiente: 1: Botón El usuario hace clic y se activa o se desactiva el menú desplegable 2: El usuario hace clic en cualquier lugar que está dentro elemento webslides y se cerrará el menú si aparece

El problema es que es webslides debajo del botón y quiero que el usuario también haga clic en el encabezado de ser capaz de no mostrar el menú si se muestra, pero esto no funciona. En cambio, el botón no se visualiza el menú en absoluto, no importa cuántas veces intento hacer clic en el botón para abrir el menú,

var menu = document.getElementsByClassName("dropdown-content")[0];
var header = document.getElementById('header');
var webslidesBody = document.getElementById('webslides');

function lessonSelectionFunction() {

  if (menu.style.display === "none") {
    menu.style.display = "block";
  } else {
    menu.style.display = "none";
  }
}

webslidesBody.onclick = function() {
  menu.style.display = "none";
}

header.onclick = function() {
  menu.style.display = "none";
}

<html>

<head>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet" />
  <!-- Optional - CSS SVG Icons (Font Awesome) -->
  <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css" />
  <!-- CSS Webslides -->
  <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">

</head>

<body>

  <header id="header">
    <nav role="navigation" class="nav">
      <div class="dropdown">
        <button class="dropbtn" style="text-transform: none;" onclick="lessonSelectionFunction()">Lesson Selection</button>
        <div class="dropdown-content" style="display:none;">
          <a href="#slide=1">Introduction</a>
          <a href="#slide=4">Lesson 1: Methodologies and Development Lifecycle</a>
          <a href="#slide=18">Lesson 2: IT Support</a>
          <a href="#slide=29">Lesson 3: Testing Foundations</a>
          <a href="#slide=42">Lesson 4: Manual Testing Activities</a>
          <a href="#slide=52">Lesson 5: Intro Into Automation</a>
        </div>
      </div>
    </nav>

    <a id="logout" href="logout.php">Logout</a>
  </header>

  <article id="webslides">

    <!-- First slide -->
    <section class="slideInRight" id="slide=1">
      // REST OF HTML CONTENT ............
    </section>
  </article>

</body>

</html>

rafaelcastrocouto :

Que está añadiendo la función a la cabecera y al botón onclick por lo que ambos se ejecutan "al mismo tiempo", ya que el botón es un hijo de la cabecera y el estilo no cambian.

El código en cuestión con una posible solución a su problema:

    var button = document.getElementsByClassName('dropbtn')[0];
    ...
    header.onclick = function(event) {
      if (event.target !== button)
        menu.style.display = "none";
    }

Probarlo:

var menu = document.getElementsByClassName("dropdown-content")[0];
var header = document.getElementById('header');
var webslidesBody = document.getElementById('webslides');
var button = document.getElementsByClassName('dropbtn')[0];

function lessonSelectionFunction() {
  if (menu.style.display === "none") {
    menu.style.display = "block";
  } else {
    menu.style.display = "none";
  }
}

webslidesBody.onclick = function() {
  menu.style.display = "none";
}

header.onclick = function(event) {
  if (event.target !== button)
    menu.style.display = "none";
}

<header id="header">
  <nav role="navigation" class="nav">
    <div class="dropdown">
      <button class="dropbtn" style="text-transform: none;" onclick="lessonSelectionFunction()">Lesson Selection</button>
      <div class="dropdown-content" style="display:none;">
        <a href="#slide=1">Introduction</a>
        <a href="#slide=4">Lesson 1: Methodologies and Development Lifecycle</a>
        <a href="#slide=18">Lesson 2: IT Support</a>
        <a href="#slide=29">Lesson 3: Testing Foundations</a>
        <a href="#slide=42">Lesson 4: Manual Testing Activities</a>
        <a href="#slide=52">Lesson 5: Intro Into Automation</a>
      </div>
    </div>
  </nav>

  <a id="logout" href="logout.php">Logout</a>
</header>

<article id="webslides">

  <!-- First slide -->
  <section class="slideInRight" id="slide=1">
    // REST OF HTML CONTENT ............
  </section>
</article>

Cómo cerrar el menú si el usuario hace clic en cualquier lugar de la pantalla?

Supongo que te gusta