Question

好吧，我想在这里使用这个菜单http://codepen.io/emredenx/pen/ojcxl

它不适用于博客http://menuteste158.blogspot.com.br/，我也尝试了几种不同的模板。

我下载了codepen文件并且它工作得很好......然后我认为问题将是博客＆＃39; ..然后我去jsFiddle测试以确保 （我的声誉不允许我放两个以上的链接，所以我会在评论中提出，对不起）并且没有用，我把我下载的文件的代码相同，并且结果与博主一样。怎么可能呢？

如果只是博客可能是代码之间的冲突，但我在四个不同的地方（我的电脑，jsfiddle，codepen，博主）进行测试，问题仍存在于其中两个......

我在博客上添加了部分菜单的评论促进一点点。

<!--menu-->

<!--script menu-->

<!--menu jquery-->

我已经在<head>之后和</ body>之前放置了jquery，并且没有任何区别，我改变的其他内容，只有博主，是这部分代码：

if ($ (window) .width () <= mediasize) {

为此：

if ($ (window) .width () & lt; = mediasize) {

现在，我不能更加困惑......我不知道要改变什么，也不知道为什么。不同位置的代码是否相同。他们应该工作。这对我来说没有意义。

Ps.:Andy Hoffman对于jsFiddle中的代码错误原因是正确的，但是仍然没有在博主模板上工作。

Answer 1

一旦导入jQuery并重新运行代码，您的小提琴就可以正常工作。

Answer 2

该菜单不适用于博客，因为这部分代码位于javascript：

If ($ (window) .width () <= mediasize) {和if ($ (window) .width () & lt; = mediasize) {

代码显示此错误：

*Uncaught SyntaxError: missing ) after argument list.*

虽然因为出现在博客上的错误The content of elements must consist of well-formed character data or markup.而导致我做了更改，因为XML代码中不支持某些字符。

但是有一种方法可以让它被接受，只需要放一个CDATA部分。像这样：

<script>
    //<![CDATA[
    (function($) {
      $.fn.menumaker = function(options) {
        var cssmenu = $(this),
          settings = $.extend({
            format: "dropdown",
            sticky: false
          }, options);
        return this.each(function() {
          $(this).find(".button").on('click', function() {
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.slideToggle().removeClass('open');
            } else {
              mainmenu.slideToggle().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
          cssmenu.find('li ul').parent().addClass('has-sub');
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').slideToggle();
              } else {
                $(this).siblings('ul').addClass('open').slideToggle();
              }
            });
          };
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
          if (settings.sticky === true) cssmenu.css('position', 'fixed');
          resizeFix = function() {
            var mediasize = 700;
            if ($(window).width() > mediasize) {
              cssmenu.find('ul').show();
            }
            if ($(window).width() <= mediasize) {
              cssmenu.find('ul').hide().removeClass('open');
            }
          };
          resizeFix();
          return $(window).on('resize', resizeFix);
        });
      };
    })(jQuery);

    (function($) {
      $(document).ready(function() {
        $("#cssmenu").menumaker({
          format: "multitoggle"
        });
      });
    })(jQuery);
    //]]>
    </script>

现在菜单正常运作。

CSS3响应下拉菜单无效

2 个答案: