javascript - 链接被阻止在径向菜单上单击

Question

我正在使用 Javascript 制作一个扩展的径向成员。菜单上有图像按钮，它们从中心图像展开，单击该图像可展开菜单。我的问题是按钮图像不可点击，因为中心按钮的图像覆盖了它们。

            var i=0;
            function expand(){
              if(i==0){
            document.getElementById("menu").style.transform="scale(3)"; 
               document.getElementById("plus").style.transform="rotate(45deg)"; 
                i=1;
              }
              else{   document.getElementById("menu").style.transform="scale(0)"; 
               document.getElementById("plus").style.transform="rotate(0deg)"; 
                i=0;
              }
            }

body{
  background-color: #303358;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.toggle {
  background-color: #303358;
  text-align: center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

}

.fa-plus{
  height: 100%;
  width:auto;
  display: block;
  transition: 0.7s;
}

.menu {
  background-color: #000123;
  height: 100px;
  width: 100px;
  transform: scale(0);
  border-radius: 50%;
  border-style: double;
  border-color: #C8C8C8;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  transition: 0.7s;

}

a {
  display: inline-block;
  position: absolute;
  font-size: 15px;
  color: #C8C8C8;

}

a:nth-child(1){
  top: 6px;
  left: 45px;
}

a:nth-child(2){
  top: 24px;
  left: 77px;
}

a:nth-child(3){
  top: 58px;
  left: 76px;
}

a:nth-child(4){
  top: 78px;
  left: 42px;
}

a:nth-child(5){
  top: 58px;
  left: 10px;
}

a:nth-child(6){
  top: 23px;
  left: 12px;
}

a:hover {
  color: #989898;
}

<div class="toggle" id="toggle" onclick="menu-expand()">

            <img src="CTicon.png" id="plus" class="fa fa-plus">
        </div>
        <div class="menu" id="menu">
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-private">
            </a>
            <a href="https://www.google.com/">

                <img src="bepis.png" style="height:20%;" class="fa fa-public" >
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public2"></i>
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public3"></i>
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public4"></i>
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public5"></i>
            </a>
        </div>

我提出一个新问题的原因是因为在大多数答案中我发现人们建议只添加一个指针事件:无；标记到我的中心展开按钮，但我不能这样做，因为它也是一个按钮。为了解决这个问题，我尝试使用 JS 来更改它，以及我尝试使用指针事件:无；。到目前为止我发现的唯一修复方法只是更改切换的 z-index，问题是当菜单展开时中心按钮然后我变得不可见，因为它位于我想避免的菜单本身下方。

编辑:好吧，现在我更困惑了，因为这该死的东西在此处的代码片段中有效哈哈。

Answer 1

所以一旦代码片段在这里工作，我意识到它一定是菜单本身之外的东西覆盖了按钮，所以我将切换按钮设置为 z-index 2 并将菜单设置为 1 并使其全部工作。