簡體   English   中英

當在小型設備上使用javascript單擊錨點鏈接時,使我的下拉菜單折疊

[英]Making my drop down menu collapse when an anchor link is clicked on small devices using javascript

因此,我嘗試使當較小的屏幕處於活動狀態時顯示的響應式下拉菜單在從下拉菜單中選擇錨點鏈接時折疊。

我在互聯網上尋找解決方案,但我迷路了。 我已經看到了一些解決方案,但我不知道如何將它們適合我的特定代碼...有人可以幫我解決這個問題...

我要指的特定頁面是http://www.valentinosgourmet.com/menu.html

這是當前的腳本代碼。有2個,因為我有主導航導航欄,然后是第二個帶有所有菜單項的導航欄

//當用戶單擊圖標時,在topnav中添加和刪除“響應”類之間切換

    function myFunctionGetMainNav() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }

</script>

<script>
// Toggle between adding and removing the "responsive" class to menunav when the user clicks on the icon

    function myFunctionGetMenuNav() {
        var x = document.getElementById("menuNavbar");
        if (x.className === "menunav") {
            x.className += " responsiveMenu";
        } else {
            x.className = "menunav";
        }
    }

</script>

任何朝着正確方向的幫助將不勝感激!

謝謝!

所以我終於能弄清楚了...(盡管現在我有一個新問題。偏移量無法正常工作),這是我需要的代碼,盡管單擊錨點鏈接時菜單會折疊...

// JavaScript Document


//menu navigation bar
$(document).ready(function(){

// --- Mobile Menu -------------------------
$("#menu-icon, .menunav a").click(function(){
  if(window.matchMedia('(max-width: 768px)').matches) {
    $("#main-navigation").slideToggle("slow");
    $("#menu-icon i").toggleClass("icon-close");
  }
});



// --- Smooth Scroll -----------------------

  $('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
  if (
  location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
  &&
  location.hostname == this.hostname
  ) {
      var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
     if (target.length) {
       event.preventDefault();
       $('html, body').animate({
           scrollTop: target.offset().top - 80
        }, 1000, function() {
            var $target = $(target);
         $target.focus();
         if ($target.is(":focus")) {
           return false;
        } else {
        $target.attr('tabindex','-1');
        $target.focus();
        };
      });
      }
     }
   });
 }); // --- End document ---------------------------------------------------------

希望這對某人有幫助。 如果有人知道為什么偏移量不保持偏移量,請讓我知道..它開始偏移,但是當到達偏移量時,它會跳回到頂部(在標題下方):(

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM