JavaScript - Onclick navigation arrow function issue

Question

I'm trying to be create a simple app with a navigation function. My issue is that when the user clicks the navigation it pops up but if the user click outside the navigation content, the content disappears and the navigation arrow doesn't work. Given below is my code,

const menuButtons = document.querySelectorAll('.clickfun');

menuButtons.forEach(button => button.addEventListener('click', toggleButton, false));

function toggleButton() {
  const id = this.dataset.id;
  const panel = document.getElementById(id);
  if (panel.style.display === 'block') {
    panel.style.display = 'none';
  } else {
    panel.style.display = 'block';
  }
} 


        var boxArray = ['box1','box2'];
        window.addEventListener('mouseup', function(event) {
            for(var i=0; i < boxArray.length; i++){
            
          var box = document.getElementById(boxArray[i]);
            if(event.target != box && event.target.parentNode != box) {
                box.style.display = 'none';
           }
                
                }
       });    
            
                  
var anchors = Array.from(document.querySelectorAll('a'));

anchors.map(anchor => {
	if(anchor.classList.contains('btn-open') || anchor.classList.contains('btn-down')) {
    anchor.addEventListener('click', () => {
      if(anchor.classList.contains('btn-open')) {
        anchor.classList.remove('btn-open');
        anchor.classList.add('btn-down');
      } 
       
        
        else {
        anchor.classList.add('btn-open');
        anchor.classList.remove('btn-down');
      } 
    });
  }
});
 

  #box1 {
                 
                 
   position: absolute;
   top: 67px;
    left: 140px;
    width: 260px;
    height: 55px;
    padding: 6px;
     display: none;
    background: #E2E2E2;
  }
  
             
.btn-open:after, a {
    
    font-family: "FontAwesome";
    content: "\f0de";
    color: #333;
    font-size: 18px;
   
}

.btn-down:after, a {
    
    font-family: "FontAwesome";
    content: "\f0dd";
    color: #333;
    font-size: 18px;
    text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
 <div id="box1">
            
            
            <h2>Options Main Page</h2>
        </div>
        
        <h2>Page Content....</h2>
        
        
        <div id="box2">
            
            
            <h2>Pops Out two</h2>
        </div>
        <nav>
       
       <a data-id="box1"  class="clickfun btn-down  " href="javascript:void(0);"> About us </a><br>

I would really appreciate some help with this. Thanks.

Answer 1

What you need is this in window.addEventListener('mouseup', function(event) { you need to prevent displaying none if click is on clickfun.

!event.target.classList.contains('clickfun')

Please check code here

const menuButtons = document.querySelectorAll('.clickfun');

menuButtons.forEach(button => button.addEventListener('click', toggleButton, false));

function toggleButton() {
  const id = this.dataset.id;
  const panel = document.getElementById(id);
  if (panel.style.display === 'block') {
    panel.style.display = 'none';
  } else {
    panel.style.display = 'block';
  }
  ChangeArrows();
}


var boxArray = ['box1', 'box2'];
window.addEventListener('mouseup', function(event) {
  for (var i = 0; i < boxArray.length; i++) {
  var anchor = document.querySelectorAll('.clickfun');
    var box = document.getElementById(boxArray[i]);    
    if (event.target != box && !boxArray.some(a=> a===event.target.parentNode.id) && !event.target.classList.contains('clickfun') && anchor[0].classList.contains('btn-open')) {
      box.style.display = 'none';
      ChangeArrows();
      event.preventDefault();
      return;
    }

  }
});


function ChangeArrows() {

  var anchor = document.querySelectorAll('.clickfun');
  if (anchor[0].classList.contains('btn-open')) {
    anchor[0].classList.remove('btn-open');
    anchor[0].classList.add('btn-down');
  } else {
    anchor[0].classList.add('btn-open');
    anchor[0].classList.remove('btn-down');
  }
}

#box1 {
  position: absolute;
  top: 67px;
  left: 140px;
  width: 260px;
  height: 55px;
  padding: 6px;
  display: none;
  background: #E2E2E2;
}

.btn-open:after,
a {
  font-family: "FontAwesome";
  content: "\f0de";
  color: #333;
  font-size: 18px;
}

.btn-down:after,
a {
  font-family: "FontAwesome";
  content: "\f0dd";
  color: #333;
  font-size: 18px;
  text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id="box1">
  <h2>Options Main Page</h2>
</div>

<h2>Page Content....</h2>


<div id="box2">


  <h2>Pops Out two</h2>
</div>
<nav>

  <a data-id="box1" class="clickfun btn-down" href="javascript:void(0);"> About us </a><br>