javascript - 获取 CSS/Javascript 菜单以正确识别链接

Question

我找到了这个菜单并将其集成到我的本地 (wordpress) 站点中。 Code pen Fork

就动画等而言，一切正常。但是，当我将链接添加到

我也尝试过链接的相对路径和绝对路径。 -- 查看 codepen 链接“开始”-->“菜单 1”-->“子菜单 1”-- 当你悬停在上面时你可以看到我已经添加了 http://www.google.com/ 的链接进行测试，但点击后不会转到该站点。

我很感激任何指示 - 如果它很简单，我很抱歉。

这是完整的代码:(也包含在代码笔链接中)

HTML:

<div class="radmenu"><a href="#" class="show" >START</a>
  <ul>
    <li>
      <a href="#" class="">Menu 1</a>
      <ul>
        <li><a href="http://www.google.com">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 3</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 4</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 5</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS:

@import "compass/css3";

$sub-menus :  5;

body {
 background: url(http://www.scenicreflections.com/files/Hazy_Forest_Road_Wallpaper_qoek0.jpg) 
}
.radmenu {
  position: absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  > a {
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    &.show {
     display: flex !important; 
    }
  }
  li {
   -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
   transition: all 1s ease; 
  }
  a {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(white, 0.9);
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 120px;
    display: none;
    text-decoration: none;
    color: #333;
    transition: all 1s ease;
    box-shadow: 0 0 15px #222;
    font-family: "segoe ui";
    font-weight: 200;
    font-size: 16px;
  }
  .selected {
    background: rgba(#333, 0.9);
    display: flex;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    color: #f1f1f1;
    box-shadow: 0 0 10px #f1f1f1;
    + ul {
      @for $i from 1 through $sub-menus {
        > li:nth-child(#{$i}) {
          $angle: 360deg / $sub-menus * $i;
          -webkit-transform: rotate($angle) translateX(100px);
          transform: rotate($angle) translateX(100px);
          > a {
            -webkit-transform: rotate(0 - $angle);
            transform: rotate(0 - $angle);
          }
        }
      }
      > li > a {
        display: flex
      }
    }
  }

}

Javascript:

var buttons = document.querySelectorAll(".radmenu a");

for (var i=0, l=buttons.length; i<l; i++) {
  var button = buttons[i];
  button.onclick = setSelected;
}

function setSelected(e) {
    if (this.classList.contains("selected")) {
      this.classList.remove("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
      } else {
        this.classList.add("show");
      }
    } else {
      this.classList.add("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
      } else {
        this.classList.remove("show");
      }
    }
    return false;
}

Answer 1

只需将您的 javascript 代码修改为以下内容，

function setSelected(e) {
  if(this.getAttribute("href") == "#"){
    if (this.classList.contains("selected")) {
      this.classList.remove("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
      } else {
        this.classList.add("show");
      }
    } else {
      this.classList.add("selected");
      if (!this.parentNode.classList.contains("radmenu")) {
        this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
      } else {
        this.classList.remove("show");
      }
    }
    return false;
  }
  else{
    return true;
  }
}

基本上，return false; 会阻止页面执行转到分配的 href 的默认操作。