1

我正在使用 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，问题是当菜单展开时，中心按钮然后我变得不可见，因为它位于菜单本身下方，我想避免。

编辑：好吧，现在我更困惑了，因为该怪异的东西在这里的代码片段中起作用，哈哈。

4

1 回答 1

0

So once the code snippet worked on here I realized it must be something outside of the menu itself overlaying the buttons so I put the toggle button to z-index 2 and the menu to 1 and got it all working.

于 2019-07-10T20:13:02.167 回答