Dropdown menu is not closing when clicked outside the menu

Question

When I click outside the menu the drop-down menu is not closing. I have tried with functions but I was not able to solve it.

<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>

What changes I have to do to close the menu?

help me to close the dropdown menu.

Thanks in advance

It will not close. Because you didn't say that explicitly. You have to add event on document click and close the `div` if it is open. Also stop bubbling for dropdown menu click. — Akash Pinnaka, Jun 26 '18 at 09:58
You can use this kind of code https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — madhu131313, Jun 26 '18 at 09:59
@ZenOut In the answers of the link, they have used `hide()` function and I have already used `custom-menu-cont hidden`. I have tried your solution by removing `hidden` and using `hide()` function, but the when I removed `hidden` word, all the contents of dropdown menu are always appear on the screen. They never hide. So how to use `hide()` function in that. — Rohit Potter, Sep 08 '18 at 18:26

Akash Pinnaka · Accepted Answer · 2018-07-02T05:41:49.207

You can use javascript to achieve that.

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

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

You can also remove onclick from <div class="custom-menubutton"> and write in javascript as it is a better convention.

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

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

The easier way is to use JQuery.

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

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

Note: I used e.stopPropagation() because, when you click on the div.custom-menubutton, It means I clicked on document too. So it runs hideDiv function and hides the menu always(Even if you click div to open dropdown). So e.stopPropagation() prevents your click propagating all the way to the document.

I have used your javascript code. Dropdown menu is opening when clicked on the entire page. I want the code to open dropdown menu when clicking on dropdown button and closing when clicked on the entire page. — Rohit Potter, Jul 01 '18 at 15:45
It is still not working. The dropdown menu is opening when clicking on the entire page and once it opens, it was not closing on clicking anywhere on the page even the dropdown menu button. — Rohit Potter, Jul 02 '18 at 07:41

Dropdown menu is not closing when clicked outside the menu

1 Answers1