Как закрыть меню, если пользователь нажимает в любом месте экрана? - PullRequest
Новая
       2

Как закрыть меню, если пользователь нажимает в любом месте экрана?

2 голосов
/ 18 марта 2020

У меня есть этот код ниже, который выполняет следующие действия: 1: пользователь нажимает кнопку, и она включает или выключает раскрывающееся меню 2: пользователь щелкает в любом месте в пределах элемента webslides и закрывает меню, если отображается

Проблема в том, что веб-слайды находятся под кнопкой, и я хочу, чтобы пользователь также нажимал на заголовок, чтобы не отображать меню, если оно отображается, но это не работает. Вместо этого кнопка вообще не отображает меню, независимо от того, сколько раз я пытаюсь нажать кнопку, чтобы открыть меню, 

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>

Ответы [ 2 ]

3 голосов
/ 18 марта 2020

Вы добавляете функцию к заголовку и к нажатию кнопки, чтобы они оба запускались «одновременно», поскольку кнопка является дочерней по отношению к заголовку и стиль не изменяется.

соответствующий код с одним возможным решением вашей проблемы: 

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

Проверьте его: 

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>
0 голосов
/ 18 марта 2020

Код не работает. Отладка. Функция на теле помогает вам ( onclick )

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...