Question

当我的网站通过Tinynav.js模块中所述的已定义像素阈值时，所有菜单项都会显示为减去父菜单项。我已通过“特殊菜单项”模块将父项定义为无链接，这意味着父div只是子菜单项的占位符，并且不链接到任何内容。问题是当网站进入阈值并且下拉滚动菜单出现在导航菜单的位置时，它不会仅向父项显示链接到父项的子项。

似乎因为父项被定义为无链接，Tiny.js模块跳过它并只显示子菜单。我已经尝试过多个东西而且没有一个工作，我已经上传了与Tinynav.js和html相关联的js，因此可以进行编辑。

可能是编辑此文件或其他内容。

感谢您提供帮助

HTML

<div id="nav"><!--nav-->
<ul class="menu"><li class="first leaf"><a href="/" class="active">Home</a></li>
    <li class="leaf"><a href="/node" title="" class="active">Public Courses</a></li>
    <li class="expanded"><span title="" class="nolink">Tradition </span><ul class="menu">          <li class="first leaf"><a href="/Egypt">Egypt</a></li>
<li class="last leaf"><a href="/node/8">Tibet</a></li>
</ul></li>
<li class="expanded"><a href="/node" title="" class="active">For Reflection</a><ul class="menu"><li class="first leaf"><a href="/current-reflections">Current Reflections</a></li>
<li class="last leaf"><a href="/past-reflections">Past Reflections</a></li>
</ul></li>
<li class="last leaf active-trail"><a href="/node" title="" class="active-trail active">About Us</a></li>
</ul>           
        </div><!--/nav-->

tinynav-fork.js

/*! Originally based on the tinynav.js library found at http://tinynav.viljamis.com by @viljamis */
(function ($, window, i) {
  $.fn.tinyNav = function (options) {
    // Default settings
    var settings = $.extend({
      'active' : 'selected', // String: Set the "active" class
      'header' : false, // Boolean: Show header instead of the active item
      'indent' : '--', // String: Set this to empty to disable identing
      'depth_count' : 2 // Integer: depth to stop counting
    }, options);
    return this.each(function () {
      // Used for namespacing
      i++;
      var $nav = $(this),
        // Namespacing
        namespace = 'tinynav',
        namespace_i = namespace + i,
        l_namespace_i = '.l_' + namespace_i,
        $select = $('<select/>').addClass(namespace + ' ' + namespace_i);
      if ($nav.is('ul,ol')) {
        if (settings.header) {
          $select.append(
            $('<option value="-null-"/>').text(Drupal.t('Navigation'))
          );
        }
        // Build options
        var options = '';
        $nav
          .addClass('l_' + namespace_i)
          .find('a')
          .each(function () {
            var indent = '';
            // indent once for each parent this has
            var parent_count = $(this).parents("ul,ol").length;
            // apply indenting if found
            for (var i=1; i<parent_count; i++) {
              indent += settings.indent;
            }
            // add spacing to end if we indent at all
            if (indent != '') {
              indent += ' ';
            }
            if (parent_count < settings.depth_count) {
              options +=
                '<option value="' + $(this).attr('href') + '">' +
                indent + $(this).text() +
                '</option>';
            }
          });
        // Append options into a select
        $select.append(options);
        // Select the active item
          $select
            .find(':eq(' + (settings.header + $(l_namespace_i + ' li')
            .index($(l_namespace_i + ' .' + settings.active)) + ')'))
            .attr('selected', true);

        // Change window location
        $select.change(function () {
          if ($(this).val() != '-null-') {
            window.location.href = $(this).val();
          }
        });
        // Inject select
        $(l_namespace_i).after($select);
      }
    });
  };
})(jQuery, this, 0);

tinynav-drupal.js

(function ($) {
  Drupal.behaviors.tinynav = {
    attach: function (context, settings) {
      // make sure we don't try to access an undefined array
      settings.tinynav = settings.tinynav || {
        selector: '#nav ul',
        media_query: 'all and (max-width:795px)',
        header: false,
        active: 'active-trail'

      }
      // Add the class to the selectors so we can access it later
      $(settings.tinynav.selector).addClass('tinyjs');

      // Build the Settings array
      var tinyNavSettings = {
        header: settings.tinynav.header
      };
      if (settings.tinynav.active) {
        tinyNavSettings.active = settings.tinynav.active;
      }

      // Tinynav (<-- new verb) them all
      $('.tinyjs').tinyNav(tinyNavSettings);
      // Add a wrapper to the select element
      $('select.tinynav').wrap('<div class="tinynav-wrapper"/>');
    },
    weight: 99
  };
})(jQuery);

Answer 1

问题出在Tinynav.js模块中，因为它正在寻找

<a>

但特殊菜单项模块会创建

<span>

这是一个有效的代码：

/*! http://tinynav.viljamis.com v1.03 by @viljamis 
modified by l.tagliamonte to fix Special Menu Items module menu links*/
(function ($, window, i) {
$.fn.tinyNav = function (options) {

// Default settings
var settings = $.extend({
  'active' : 'selected', // String: Set the "active" class
  'header' : false // Boolean: Show header instead of the active item
}, options);

return this.each(function () {

  // Used for namespacing
  i++;

  var $nav = $(this),
    // Namespacing
    namespace = 'tinynav',
    namespace_i = namespace + i,
    l_namespace_i = '.l_' + namespace_i,
    $select = $('<select/>').addClass(namespace + ' ' + namespace_i);

  if ($nav.is('ul,ol')) {

    if (settings.header) {
      $select.append(
        $('<option/>').text('Navigation')
      );
    }

    // Build options
    var options = '';
    var indent = 0;
    var indented = ["&nbsp;"];
    for ( var i = 0; i < 10; i++) {
      indented.push(indented[indented.length-1]+indented[indented.length-1]);
    }
    indented[0] = "";
    $nav
      .addClass('l_' + namespace_i)
      .children('li')
      .each(buildNavTree=function () {
        var a = $(this).children('a').first();
        var nolink = $(this).children('span.nolink').first();

        if (nolink.html() != null){
            options +=
          '<option value="' + nolink.html() + '" disabled>' +
          indented[indent] + nolink.html() +
          '</option>';
        }else{
        options +=
          '<option value="' + a.attr('href') + '">' +
          indented[indent] + a.text() +
          '</option>';
          }
          indent++;
          $(this).children('ul,ol').children('li').each(buildNavTree);
          indent--;
      });

    // Append options into a select
    $select.append(options);

    // Select the active item
    if (!settings.header) {
      $select
        .find(':eq(' + $(l_namespace_i + ' li')
        .index($(l_namespace_i + ' li.' + settings.active)) + ')')
        .attr('selected', true);
    }

    // Change window location
    $select.change(function () {
      window.location.href = $(this).val();
    });

    // Inject select
    $(l_namespace_i).after($select);

  }

$('option[value="'+document.location+'"]').attr("selected","selected");

});

};
})(jQuery, this, 0);

// Tinynav
jQuery(function(){
// Main Menu
jQuery('#main-menu > ul.menu').tinyNav({
    active: 'selected', // Set the "active" class
});
});

Drupal - Tinynav js

1 个答案: