Navbar box Disappear issue

November 26, 2021

I created a Dropdown Menu with Javascript.
When I click on the dropdown button, the box opens. But when I click on that box, it disappears.

I want the display not to disappear when I click on the box. Otherwise, if I click outside, it will disappear. How do I do it?

Thanks to everyone.

image

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .navbar
        {
            width: 100%;
            padding: 0 10% 0 10%;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
            z-index: 4;
            position: relative;
        }
        .navbar a
        {
            padding:15px 0px;
            text-align: center;
            text-decoration: none;
            float: left;
            font-weight: 200;
        }
        .dropbtn
        {
            font-size: 16px;
            border: none;
            outline: none;
            padding: 21.5px 20px;
            background-color: inherit;
            margin: 0;
            cursor: pointer;
            font-weight: bolder;
            color: #2d3436;
        }
        .dropdown 
        {
            float: left;
        }
        .dropdown-content 
        {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 460px;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
            height: 450px;
            border-radius: 3.5px;
            z-index: 1;
            border-top: 2px solid #000;
        }
        .show{display:block}
    </style>
</head>
<body>
     <div class="navbar">
        <div class="dropdown">
            <button onclick="my2Function()" class="dropbtn dropbtn1">Marketing</button>
            <div id="myDropdown1" class="dropdown-content dropdown-content1">
              
            </div>
        </div>

        <div class="dropdown">
            <button onclick="my2Function()" class="dropbtn dropbtn2">Development</button>
            <div id="myDropdown2" class="dropdown-content dropdown-content2">
              
            </div>
        </div>

        <div class="dropdown">
            <button onclick="my3Function()" class="dropbtn dropbtn3">Others</button>
            <div id="myDropdown3" class="dropdown-content dropdown-content2">
              
            </div>
        </div>
    </div>

    <script>
    function my1Function() {
      document.getElementById("myDropdown1").classList.toggle("show");
    }
    
    function my2Function() {
      document.getElementById("myDropdown2").classList.toggle("show");
    }
    
    function my3Function() {
      document.getElementById("myDropdown3").classList.toggle("show");
    }
    
    window.addEventListener('click', function(event) {

      const dropdownContents = document.querySelectorAll('.dropdown-content')
      dropdownContents.forEach(content => {
        content.classList.remove('show');
      });

      if (event.target.matches('.dropbtn')) {
        event.target.nextElementSibling.classList.add('show');
      }
    })
    </script>
</body>
</html>

>Solution :

Here is what you can do :

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .navbar
        {
            width: 100%;
            padding: 0 10% 0 10%;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
            z-index: 4;
            position: relative;
        }
        .navbar a
        {
            padding:15px 0px;
            text-align: center;
            text-decoration: none;
            float: left;
            font-weight: 200;
        }
        .dropbtn
        {
            font-size: 16px;
            border: none;
            outline: none;
            padding: 21.5px 20px;
            background-color: inherit;
            margin: 0;
            cursor: pointer;
            font-weight: bolder;
            color: #2d3436;
        }
        .dropdown 
        {
            float: left;
        }
        .dropdown-content 
        {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 460px;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
            height: 450px;
            border-radius: 3.5px;
            z-index: 1;
            border-top: 2px solid #000;
        }
        .show{display:block}
    </style>
</head>
<body>
     <div class="navbar">
        <div class="dropdown">
            <button onclick="my1Function()" class="dropbtn dropbtn1">Marketing</button>
            <div id="myDropdown1" class="dropdown-content dropdown-content1">
              
            </div>
        </div>

        <div class="dropdown">
            <button onclick="my2Function()" class="dropbtn dropbtn2">Development</button>
            <div id="myDropdown2" class="dropdown-content dropdown-content2">
              
            </div>
        </div>

        <div class="dropdown">
            <button onclick="my3Function()" class="dropbtn dropbtn3">Others</button>
            <div id="myDropdown3" class="dropdown-content dropdown-content3">
              
            </div>
        </div>
    </div>

    <script>
    function my1Function() {
      document.getElementById("myDropdown1").classList.toggle("show");
    }
    
    function my2Function() {
      document.getElementById("myDropdown2").classList.toggle("show");
    }
    
    function my3Function() {
      document.getElementById("myDropdown3").classList.toggle("show");
    }
    
    window.addEventListener('click', function(event) {
        
      const dropdownContents = document.querySelectorAll('.dropdown-content')
      dropdownContents.forEach(content => {
        if(!(event.target.className == content.className)) {
            content.classList.remove('show');
        }
      });

      if (event.target.matches('.dropbtn')) {
        event.target.nextElementSibling.classList.add('show');
      }
    })
    </script>
</body>
</html>

You need to match event.target.className with the class of your dropdown div.