Drupal 7.x-5.x 테마가 작동하도록 모바일 자바 스크립트를 사용할 수 없습니다.

Question

Zen 7.x-5.x 테마의 모바일 탐색을 위해 JavaScript를 Drupal에 추가하려고합니다. https://stackoverflow.com/a/14526812

그러나 자바 스크립트에 새로운 존재가 나는 그것이 동작하지 않습니다 : 내가 추가 할 노력하고있어 자바 스크립트 내가 여기에 설명 된 것처럼 자바 스크립트를 사용할 필요가 이해 http://codepen.io/micahgodbolt/pen/czwer

에서 찾을 수 있습니다. 내 최신 시도는에 행 18 페이지의 "정의되지 않은 함수 아니다"주는합니다 (adjustMenu 변수가 선언되는 경우) 다음

(function($) { 
    Drupal.behaviors.mybehavior = { 
     attach: function() { 
     var ww = $(window).width(); 

     $(document).ready(function() { 
      $(".nav li a").each(function() { 
       if ($(this).next().length > 0) { 
        $(this).addClass("parent"); 
        }; 
       }) 

       $(".toggleMenu").click(function(e) { 
        e.preventDefault(); 
        $(this).toggleClass("active"); 
        $(".nav").toggle(); 
       }); 
       adjustMenu(); 
      }) 

      $(window).bind('resize orientationchange', function() { 
       ww = $(window).width(); 
       adjustMenu(); 
      }); 

      var adjustMenu = function() { 
       if (ww < 768) { 
       // if "more" link not in DOM, add it 
       if (!$(".more")[0]) { 
       $('<div class="more">&nbsp;</div>').insertBefore($('.parent')); 
       } 
        $(".toggleMenu").css("display", "inline-block"); 
        if (!$(".toggleMenu").hasClass("active")) { 
         $(".nav").hide(); 
        } else { 
         $(".nav").show(); 
        } 
        $(".nav li").unbind('mouseenter mouseleave'); 
        $(".nav li a.parent").unbind('click'); 
       $(".nav li .more").unbind('click').bind('click', function() { 

         $(this).parent("li").toggleClass("hover"); 
        }); 
       } 
       else if (ww >= 768) { 
       // remove .more link in desktop view 
       $('.more').remove(); 
        $(".toggleMenu").css("display", "none"); 
        $(".nav").show(); 
        $(".nav li").removeClass("hover"); 
        $(".nav li a").unbind('click'); 
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { 
         // must be attached to li so that mouseleave is not triggered when hover over submenu 
         $(this).toggleClass('hover'); 
       }); 
      } 
     } 
    } 
    }; 
})(jQuery); 

젠 7에는 모바일 네비게이션이 없기 때문에 내가 어떤 도움을 주셔서 감사합니다 정말 것이다 기본적으로 .x-5.x 테마를 사용하고 Drupal 용으로 작성되지 않은 JavaScript를 추가하는 것은 그리 쉽지 않습니다.

Answer 1

rht adjustMenu 변수에 대한 선언을 호출하는 위치로 이동하는 것을 포함하여 몇 가지 조정을 통해 작업을했습니다. 전체 javscript는 다음과 같습니다.

(function ($) { 
    Drupal.behaviors.mobile_menu_toggle = { 
    attach: function (context, settings) { 
     var ww = $(window).width(); 

     var adjustMenu = function() { 
       if (ww < 768) { 
       // if "more" link not in DOM, add it 
       if (!$(".more")[0]) { 
       $('<div class="more">&nbsp;</div>').insertBefore($('.parent')); 
       } 
        $(".toggleMenu").css("display", "inline-block"); 
        if (!$(".toggleMenu").hasClass("active")) { 
         $(".menu").hide(); 
        } else { 
         $(".menu").show(); 
        } 
        $(".menu li").unbind('mouseenter mouseleave'); 
        $(".menu li a.parent").unbind('click'); 
       $(".menu li .more").unbind('click').bind('click', function() { 

         $(this).parent("li").toggleClass("hover"); 
        }); 
       } 
       else if (ww >= 768) { 
       // remove .more link in desktop view 
       $('.more').remove(); 
        $(".toggleMenu").css("display", "none"); 
        $(".menu").show(); 
        $(".menu li").removeClass("hover"); 
        $(".menu li a").unbind('click'); 
        $(".menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { 
         // must be attached to li so that mouseleave is not triggered when hover over submenu 
         $(this).toggleClass('hover'); 
        }); 
       } 
      } 

     $(document).ready(function() { 
      $(".menu li a").each(function() { 
       if ($(this).next().length > 0) { 
        $(this).addClass("parent"); 
        }; 
       }) 

       $(".toggleMenu").click(function(e) { 
        e.preventDefault(); 
        $(this).toggleClass("active"); 
        $(".menu").toggle(); 
       }); 
       adjustMenu(); 
      }) 

      $(window).bind('resize orientationchange', function() { 
       ww = $(window).width(); 
       adjustMenu(); 
      }); 


     } 
    }; 
})(jQuery);