Joomla移动菜单冲突

Question

我在Joomla网站上工作。这是到网站的链接。这个有两个菜单的网站在桌面大小的屏幕上运行良好，但是当在智能手机上查看时，比如iphone 5，它显示了八个下拉菜单，而不是两个。

这是在iphone上查看此链接时的图片：

。

当只有一个菜单时，移动设备上的页面就会很好地打开。我也看不到任何js冲突。我应该从哪里开始诊断这个问题？

谢谢。

编辑：只有两个菜单模块，它们也只在内部链接上，其中一个在这里发布。我在这里张贴了超级鱼菜单模板代码：

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. 
All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$layouttype = $params->get('layouttype');
switch ($layouttype) {
case 'hor':
    $layout_class = "";
    break;
    case 'vert':
    $layout_class = "sf-vertical";
    break;
    case 'nav':
    $layout_class = "sf-navbar";
    break;  
default:
    $layout_class = "";
    break;
}
?>

<ul class="sf-menu <?php echo $class_sfx;?> <?php echo $layout_class; ?>"<?php
$tag = '';
if ($params->get('tag_id')!=NULL) {
    $tag = $params->get('tag_id').'';
    echo ' id="'.$tag.'"';
}
?>>

<?php
foreach ($list as $i => &$item) :
$class = 'item-'.$item->id;
if ($item->id == $active_id) {
    $class .= ' current';
}

if (in_array($item->id, $path)) {
    $class .= ' active';
}
elseif ($item->type == 'alias') {
    $aliasToId = $item->params->get('aliasoptions');
    if (count($path) > 0 && $aliasToId == $path[count($path)-1]) {
        $class .= ' active';
    }
    elseif (in_array($aliasToId, $path)) {
        $class .= ' alias-parent-active';
    }
}

if ($item->deeper) {
    $class .= ' deeper';
}

if ($item->parent) {
    $class .= ' parent';
}

if (!empty($class)) {
    $class = ' class="'.trim($class) .'"';
}

echo '<li'.$class.'>';

// Render the menu item.
switch ($item->type) :
    case 'separator':
    case 'url':
    case 'component':
        require JModuleHelper::getLayoutPath('mod_superfish_menu', 'default_'.$item->type);
        break;

    default:
        require JModuleHelper::getLayoutPath('mod_superfish_menu', 'default_url');
        break;
endswitch;

// The next item is deeper.
if ($item->deeper) {
    echo '<ul>';
}
// The next item is shallower.
elseif ($item->shallower) {
    echo '</li>';
    echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else {
    echo '</li>';
}
endforeach;
?></ul>

<script type="text/javascript">
// initialise plugins
jQuery(function(){
    jQuery('ul.sf-menu')
        <?php if($params->get('supersubs')): ?> 
            .supersubs({
                minWidth:    12,   // minimum width of sub-menus in em units
                maxWidth:    27,   // maximum width of sub-menus in em units
                extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                             // due to slight rounding differences and font-family
            })
    <?php endif; ?> 
    .superfish({
        hoverClass:    'sfHover',         
    pathClass:     'overideThisToUse',
    pathLevels:    1,    
    delay:         <?php echo $params->get('sf-delay'); ?>, 
    animation:     {<?php echo $params->get('sf-animation'); ?>}, 
    speed:         '<?php echo $params->get("sf-speed"); ?>',   
    speedOut:      '<?php echo $params->get("sf-speed-out"); ?>',   
    autoArrows:    false, 
    disableHI:     false, 
    useClick:      <?php echo $params->get('useClick'); ?>,
    easing:        "<?php echo $params->get('easing'); ?>",
    onInit:        function(){},
    onBeforeShow:  function(){},
    onShow:        function(){},
    onHide:        function(){},
    onIdle:        function(){}
    });
});

jQuery(function(){
    jQuery('.sf-menu').mobileMenu({
        defaultText: '<?php echo $params->get('defaultText'); ?>',
        className: '<?php echo $params->get('className'); ?>',
        subMenuClass: '<?php echo $params->get('subMenuClass'); ?>'
    });
})

jQuery(function(){
    var ismobile = navigator.userAgent.match(/(iPhone)|(iPod)|(android)|(webOS)/i)
    if(ismobile){
        jQuery('.sf-menu').sftouchscreen({});
    }
})

​

再编辑一次以包含jquery.mobilemenu.js :

(function($){
$.fn.mobileMenu = function(options) {

var defaults = {
        defaultText: 'Navigate to...',
        className: 'select-menu',
        subMenuClass: 'sub-menu',
        subMenuDash: '–'
    },
    settings = $.extend( defaults, options ),
    el = $(this);

this.each(function(){
    // ad class to submenu list
    el.find('ul').addClass(settings.subMenuClass);

    // Create base menu
    $('<select />',{
        'class' : settings.className
    }).insertAfter( el );

    // Create default option
    $('<option />', {
        "value"     : '#',
        "text"      : settings.defaultText
    }).appendTo( '.' + settings.className );

    // Create select option from menu
    el.find('a, .separator').each(function(){
        var $this   = $(this),
                optText = '' + $this.text(),
                optSub  = $this.parents( '.' + settings.subMenuClass ),
                len         = optSub.length,
                dash;

        // if menu has sub menu
        if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
            dash = Array( len+1 ).join( settings.subMenuDash );
            optText = dash + optText;
        }

        if (!$this.hasClass('separator')) {

        // Now build menu and append it
        $('<option />', {
            "value" : this.href,
            "html"  : optText,
            "selected" : (this.href == window.location.href)
        }).appendTo( '.' + settings.className );

        } else {
            $('<option />', {
            "value" : '#',
            "html"  : optText
        }).appendTo( '.' + settings.className );
        }

    }); // End el.find('a').each



    // Change event on select element
    $('.' + settings.className).change(function(){
        var locations = $(this).val();
        if( locations !== '#' ) {
            window.location.href = $(this).val();
        };
    });

}); // End this.each

return this;

};
})(jQuery);

Answer 1

首先，这个视图不仅可以在iphone上实现--如果您调整浏览器窗口的大小，使其足够小，也可以在桌面上实现。

如果您在菜单部分查看页面的源代码--您会注意到如下所示：

<ul class="sf-menu sf-vertical">...<ul>
<script>    
  jQuery(function(){
    jQuery('.sf-menu').mobileMenu({
    defaultText: 'Navigate to...',
    className: 'select-menu',
    subMenuClass: 'sub-menu'
    });
  })
</script>

这段代码在每个菜单下(你有两个)-所以这里的脚本基本上是寻找元素与sf-菜单类，并使moile选择菜单从它。

简单的数学--您有两个菜单，在中，每个菜单都有这段代码--所以代码在代码中看起来像两次，而不是单一的。

解决方案：

1. 您需要重写Joomla超级鱼菜单模块代码，用您自己的-从那里删除.，好文章这里。
2. 你需要添加前一步的代码..。到模板文件或模板JS文件的末尾。