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()可以防止您的点击一直传播到文档。

在菜单外单击时，下拉菜单未关闭

1 个答案: