折疊式菜單區域中的按鈕和鏈接不可單擊

Question

我的網頁菜單出現問題。 菜單工作正常，但是出現在展開菜單區域中的所有按鈕或鏈接都是不可單擊的。

有人知道我的代碼有什么問題嗎？ 您可以在下面以及在codepen.io上找到它

codepen.io上的菜單

代碼（HTML，CSS，JS）：

 toggle = document.querySelectorAll(".toggle")[0]; nav = document.querySelectorAll("nav")[0]; toggle_open_text = 'Menu'; toggle_close_text = 'Close'; toggle.addEventListener('click', function() { nav.classList.toggle('open'); if (nav.classList.contains('open')) { toggle.innerHTML = toggle_close_text; } else { toggle.innerHTML = toggle_open_text; } }, false); setTimeout(function(){ nav.classList.toggle('open'); }, 800); 

 $size : 40px; $items : 7; $transition : .5s; $bounce : cubic-bezier(.3,1.4,.5,.9); $color-inner : #343b4c; $color-outer : #3f5f94; $background: mix($color-inner, $color-outer); $black : shade($color-outer, 80%); $start-scale : .5; $start-rot : 190deg; nav { z-index: 10; display: block; position: fixed; width: $size * $items * 2; height: $size * $items * 2; user-select: none; transform: translate3d($size*.5,-$size*.5,0); transition: transform $transition $bounce; color:white !important; &.open { transform: translate3d(0,0,0); } &.top-right { top: -$size * ($items - 2.2); right: -$size * ($items - 2.2); } } nav a{ position: absolute; display: inline-block; text-align: center; cursor: pointer; font: $size*.5 Lato, sans-serif; line-height: $size * .8; padding-top: $size * .2; border-radius: $size * $items; transform: scale3d($start-scale, $start-scale, $start-scale) rotate3d(0,0,1,$start-rot); pointer-events: none; opacity: 0; cursor: pointer; transition: transform $transition $bounce, opacity $transition; color: white !important; div { transform: rotate(180deg); } } nav.open a { pointer-events: auto; opacity: 1; } @for $i from 1 through $items { nav a:nth-child(#{$i}){ $i : $i - 1; $-i : $items - $i; $pct : ($i+1)/$items * 100%; $color : mix($color-inner, $color-outer, $pct); top: $i * $size; left: $i * $size; right: $i * $size; bottom: $i * $size; background: $color; transition-delay: $i * $transition/$items; } } @for $i from 1 through $items { a:nth-child(#{$i}){ $i : $i - 1; $-i : $items - $i; $pct : ($i+1)/$items * 100%; $color : mix($color-inner, $color-outer, $pct); nav.open & { transition-delay: $i * $transition/$items; transform: scale3d(1,1,1) rotate3d(0,0,1,$start-rot); opacity: 1; &:hover { background: #343b4c; color: white !important; text-decoration:none; transition-delay: 0s; } &:active { background: shade($color, 50%); color: white !important; text-decoration:none; } &.toggle { transform: scale3d(.9,.9,.9) rotate3d(0,0,1,$start-rot - 180deg); } } } } .toggle { line-height: $size*2; padding: 0; width: $size*2; background: $color-inner; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; .open & { transform: rotate3d(0,0,1,0deg); } &:hover { background: shade($color-inner, 90%); color: $color-inner; } &:active { background: shade($color-inner, 50%); color: rgba($color-inner, .5); transform: scale(.9); transition-duration: 0s; } } 

 <nav class="top-right open"> <a class="disc l1"> <div>Messages</div> </a> <a class="disc l2"> <div>Photos</div> </a> <a class="disc l3"> <div>Profile</div> </a> <a class="disc l4"> <div>Likes</div> </a> <a class="disc l5"> <div>Likes</div> </a> <a class="disc l6"> <div>Likes</div> </a> <a class="disc l7 toggle"> Menu </a> </nav> 

Answer 1

您需要將href屬性添加到錨點，如下所示：

<a href="https://stackoverflow.com" class="disc l1">
    <div>Messages</div>
</a>

整個HTML：

<nav class="top-right open">
    <a href="test1" class="disc l1">
        <div>Messages</div>
    </a>
    <a href="test2" class="disc l2">
        <div>Photos</div>
    </a>
    <a href="test3" class="disc l3">
        <div>Profile</div>
    </a>
    <a href="test4" class="disc l4">
        <div>Likes</div>
    </a>
    <a href="test5" class="disc l5">
        <div>Likes</div>
    </a>
    <a href="test6" class="disc l6">
        <div>Likes</div>
    </a>
    <a href="close" class="disc l7 toggle">
        Menu
    </a>
</nav>