Question

我正在尝试创建一个具有导航功能的简单应用。我的问题是，当用户单击导航时，它会弹出，但如果用户在导航内容之外单击，该内容就会消失并且导航箭头不起作用。下面是我的代码，

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

 auto lambda1 = 1==1
             ? [] (int a) {std::cout << "First\n";}
             : [] (int a) {std::cout << "Second\n";};

 auto lambda2 = 1==2
             ? [] (int a) {std::cout << "First\n";}
             : [] (int a) {std::cout << "Second\n";};
lambda1(10);
lambda2(10);

我非常感谢您的帮助。谢谢。

Answer 1

您需要的是window.addEventListener('mouseup', function(event) {中的此内容，如果单击clickfun则需要避免不显示任何内容。

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

请在此处检查代码

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>

JavaScript-Onclick导航箭头功能问题

1 个答案: