css - 在菜单外单击时，下拉菜单不会关闭

Question

当我在菜单外单击时，下拉菜单没有关闭。我已尝试使用函数，但无法解决它。

<div onclick="document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden')";    class="custom-menubutton">
      <i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
    </div>
  </div>
  <div class="custom-menu-cont hidden">
    <div class="custom-menu">
      <div class="arrow-up"></div>
      <div>
        <div class="custom-menu-item">
          <a href="http://blog.fossasia.org" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
          <p class="custom-title">Blogs</p></a>
        </div>
        <hr style="margin-bottom: 10px; margin-top: 10px;">
        <div class="custom-menu-item">
          <a href="https://susper.com/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
          <p class="custom-title">Susper</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://chat.susi.ai/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
          <p class="custom-title">Susi</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://loklak.org/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
          <p class="custom-title">loklak</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://phimp.me/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
          <p class="custom-title">Phimp.me</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://pslab.fossasia.org" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
          <p class="custom-title">PS Lab</p></a>
        </div>
        <hr style="margin: 10px">
        <div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
          More on&nbsp;<a href="https://labs.fossasia.org/" target="_blank" style="text-decoration: none;color: #737373"> labs.fossasia.org</a>
        </div>
      </div>
    </div>
  </div>

我必须做哪些更改才能关闭菜单？

帮我关闭下拉菜单。

提前致谢

Answer 1

您可以使用 javascript 来实现。

function hideDiv(){
    document.getElementsByClassName('custom-menu-cont')[0].classList.remove('hidden');
}

document.addEventListener("click", hideDiv, false);

您还可以从 <div class="custom-menubutton"> 中删除 onclick并用 javascript 编写，因为这是一个更好的约定。

function hideDivStopPropagation(e) {
    document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden');
    e.stopPropagation();
}

document.getElementsByClassName('custom-menubutton')[0].addEventListener("click", hideDivStopPropagation, false);

更简单的方法是使用 JQuery。

$(document).on('click', function() {
  $('.custom-menu-cont').toggleClass('hidden');
});

$('.custom-menubutton').on('click', function(e) {
  e.stopPropagation();
  $('.custom-menu-cont').toggleClass('hidden');
});

注意:我使用了e.stopPropagation()因为，当你点击 div.custom-menubutton ，这意味着我也点击了文档。因此它运行 hideDiv 函数并始终隐藏菜单(即使您单击 div 打开下拉菜单)。所以e.stopPropagation()防止您的点击一直传播到文档。