Question

我将以下代码用于移动导航菜单。由于它是一页纸，因此我的菜单包含指向id标签的链接。链接有效，但是我的问题是在单击链接之一后菜单没有消失。我敢肯定，这只是对js的轻微修改，但是不幸的是我无法弄清楚要更改什么。感谢您的帮助。

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

<div id="menu-mobile">
  <div class="topnav">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <h3>Menü</h3>
    </a>

    <div id="myLinks">
      <div class="backdrop"></div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#teaser' ?>">Teaser</a>
      </div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#aktuelles' ?>">Aktuelles</a>
      </div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#about' ?>">Über die Ausstellung</a>
      </div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#kuenstler' ?>">Künstler</a>
      </div>
      <div class="menu-item">
        <a href="http://website.de">Website</a>
      </div>

    </div>


  </div>
</div>

Answer 1

您可能打算这样做

const toggle = e => {
  e.preventDefault()
  const tgt = e.target;
  if (tgt.classList.contains("icon") || tgt.tagName==="H3") {
    document.getElementById("myLinks").classList.toggle("hide");
  }
  else if (tgt.parentNode.classList.contains("menu-item")) {
    document.getElementById("myLinks").classList.add("hide")
  }
}

document.getElementById("menu-mobile").addEventListener("click",toggle)
document.getElementById("menu-mobile").addEventListener("touchstart",toggle)

.hide {
  display: none;
}

<div id="menu-mobile">
  <div class="topnav">
    <a href="#" class="icon">
      <h3>Menü</h3>
    </a>

    <div id="myLinks" class="hide">
      <div class="backdrop"></div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#teaser' ?>">Teaser</a>
      </div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#aktuelles' ?>">Aktuelles</a>
      </div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#about' ?>">Über die Ausstellung</a>
      </div>
      <div class="menu-item">
        <a href="<?php echo home_url(); echo '#kuenstler' ?>">Künstler</a>
      </div>
      <div class="menu-item">
        <a href="http://website.de">Website</a>
      </div>

    </div>


  </div>
</div>

Answer 2

这可以通过很多方式完成-

但是自从您标记了jQuery之后，我将为您提供有关如何使用它的基本示例。

代码中的注释和解释。

$('.icon').on('click', function(e){
  e.preventDefault(); //This doesn't need to be a link - but since it is, we will prevent the action
  $('#myLinks').slideToggle(); //open or close the menu
});

$('.menu-item a').on('click', function(e){
  e.preventDefault(); //Stop the normal link action
  var theIdToFind = $(this).attr('href'); //find your section
  if (~theIdToFind.indexOf("http")){
    window.location.href =theIdToFind;
    return false;
  } else {
    
    $('#myLinks').slideToggle(); //Close the menu, since it can only be open when this is clicked.
    
    $('html, body').animate({
         scrollTop: $(theIdToFind).offset().top - 150 //Scroll down to it.
      }, 2000);
  }
  
});

#myLinks{display:none;}
.someHeightForVisualPurposes{height:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-mobile">
    <div class="topnav">
        <a href="#" class="icon">
            <h3>Menü</h3>
        </a>

        <div id="myLinks">
            <div class="backdrop"></div> 
            <div class="menu-item">
                    <a href="#teaser">Teaser</a>
            </div>    
            <div class="menu-item">
                    <a href="#aktuelles">Aktuelles</a>
            </div>
            <div class="menu-item">
                    <a href="#about">Über die Ausstellung</a>
            </div>
            <div class="menu-item">
                    <a href="#kuenstler">Künstler</a>  
            </div>
            <div class="menu-item">
                <a href="http://website.de">Website</a>
            </div> 
            
        </div>
        
        <div class="someHeightForVisualPurposes" id="teaser"><h1>TEASER SECTION</h1></div>
        <div class="someHeightForVisualPurposes" id="aktuelles"><h1>aktuelles SECTION</h1></div>
        <div class="someHeightForVisualPurposes" id="about"><h1>about SECTION</h1></div>
        <div class="someHeightForVisualPurposes" id="kuenstler"><h1>kuenstler SECTION</h1></div>


    </div>
  </div>

Answer 3

您已经在使用jQuery，只需将其添加到<script>标记内

 $('.menu-item').click(function (){
        $('#myLinks').hide();
    });

单击后隐藏移动菜单– Javascript

3 个答案: