Question

我试图找到一个解决方案，但我发现它没用。我右边有一个菜单，还有一个“打开”按钮。我无法解决当我点击身体时菜单如何自动关闭。我在谷歌上发现了很多脚本，但如果我使用它们，我就无法点击菜单。

这就是我的菜单的样子

我试过的每一件事都会刮掉我的代码，看起来会像第一张图片，但是无法点击......

这是CSS

.sidenavyt {
    height: 100%;
    width: 0;
    opacity: 0.85;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
#menu-close {
margin-top: -30px;
margin-right: 10px;
}
.sidenavyt a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenavyt a:hover {
    color: #f1f1f1;
}

.sidenavyt .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenavyt {padding-top: 15px;}
  .sidenavyt a {font-size: 18px;}
}

这是JS

function openNavyt() {
    document.getElementById("mySidenavyt").style.width = "250px";
    document.getElementById("myNavBtn").style.opacity = "0";
}

function closeNavyt() {
    document.getElementById("mySidenavyt").style.width = "0";
    document.getElementById("myNavBtn").style.opacity = "1";
    document.body.addEventListener('click', fn, true); 
}

HTML

<div id="mySidenavyt" class="sidenavyt">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNavyt()">&times;</a>
  <a href="#Home">Home</a>
  <a href="#Produse">Produse</a>
  <a href="#Clienti">Clienti</a>
  <a href="#DespreNoi">Despre Noi</a>
  <a href="#Contact">Contact</a>
</div>
<div id="myNavBtn">
<span style=" position: fixed;z-index:1; top:0;right: 0;font-size:30px;cursor:pointer" onclick="openNavyt()">&#9776; open</span></div>

Answer 1

喜欢这个

HTML

<div id="mySidenavyt" class="sidenavyt">
<a href="javascript:void(0)" class="closebtn" onclick="closeNavyt()">&times; 
</a>
<a href="#Home">Home</a>
<a href="#Produse">Produse</a>
<a href="#Clienti">Clienti</a>
<a href="#DespreNoi">Despre Noi</a>
<a href="#Contact">Contact</a>
</div>
<div id="myNavBtn">
<span style=" position: fixed;z-index:1; top:0;right: 0;font-size:30px;cursor:pointer" onclick="openNavyt()">&#9776; open</span>
</div>
<div id="backNav" style="width:100%;height:100%;display:none;position:absolute;z-index:1;background-color:red;" onclick="closeNavyt()">&nbsp;</div>

JS

    function openNavyt() {
    document.getElementById("mySidenavyt").style.width = "250px";
    document.getElementById("myNavBtn").style.opacity = "0";
    document.getElementById("backNav").style.display = "initial";
}

function closeNavyt() {
    document.getElementById("mySidenavyt").style.width = "0";
    document.getElementById("myNavBtn").style.opacity = "1";
    document.getElementById("backNav").style.display = "none";
    document.body.addEventListener('click', fn, true);
}

点击正文并关闭右侧导航

1 个答案: