Question

我使用普通的javascript制作了一个切换边栏，它具有指向同一页面上一部分的链接，但是当我单击它时，边栏仍然遮盖了目标数据。如何删除它？

<div class="container sidebar">
 <h4>Quick Links</h4>
 <ul>
  <li><a href="#">Log in </a></li>
  <li><a href="#">register</a></li>
  <li><a href="#">services</a></li>
  <li><a href="#">About us</a></li>
 </ul>
 <h4>Contacts</h4>
 <ul>
  <li><a href="tel:+256751224583"><i class="fa fa-phone"></i>+256 751224583</a>
  <li><a href="#contacts"><i class="fa fa-envelope"></i>alfredkhan@gmail.com</a>
  <li><a href="#"><i class="fab fa-facebook"></i>alfredkhan</a>
 </ul>
</div>

JavaScript

document.querySelector('.fa-bars').addEventListener('click',toggle);
 function toggle() {
const sidebar=document.querySelector('.sidebar');
if(sidebar.style.display==='none') {
sidebar.style.display='block';
} else {
sidebar.style.display='none';
}
};

Answer 1

这是一个解决方案，请使用querySelectorAll

创建另一个功能，以查看所有链接

在每个链接上循环浏览，并在单击链接时使用相同的切换功能关闭侧边栏，如下所示：

for (var i=0; i < links.length; i++) {
    links[i].addEventListener('click',toggle);
}

运行下面的代码片段以查看其运行情况。

const sidebar = document.querySelector('.sidebar');

document.querySelector('.fa-bars').addEventListener('click',toggle);

function toggle() {
if(sidebar.style.display==='none') {
sidebar.style.display='block';
} else {
sidebar.style.display='none';
}
};

var links = document.querySelectorAll('li a');

for (var i=0; i < links.length; i++) {
    links[i].addEventListener('click',toggle);
}

<div class="container sidebar">
 <h4>Quick Links</h4>
 <ul>
  <li><a onclick="close();" href="#">Log in </a></li>
  <li><a onclick="close();" href="#">register</a></li>
  <li><a onclick="close();" href="#">services</a></li>
  <li><a onclick="close();" href="#">About us</a></li>
 </ul>
 <h4>Contacts</h4>
 <ul>
  <li><a onclick="close();" href="tel:+256751224583"><i class="fa fa-phone"></i>+256 751224583</a>
  <li><a onclick="close();" href="#contacts"><i class="fa fa-envelope"></i>alfredkhan@gmail.com</a>
  <li><a onclick="close();" href="#"><i class="fab fa-facebook"></i>alfredkhan</a>
 </ul>
</div>

<button class="fa-bars">toggle</button>

单击子链接时，使可切换的侧边栏消失

1 个答案: