Question

我正在Joomla网站上工作。这是网站的link。这个有两个菜单的网站在桌面尺寸屏幕上工作正常，但在智能手机上查看时，比如iphone 5 它显示八个下拉菜单而不是两个。

这是在iphone上查看this link时的图像：
enter image description here 。

当只有一个菜单时，页面在移动设备上打开。我也看不到任何类型的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: '&ndash;'
    },
    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-menu 类的元素并从中创建moile选择菜单。
简单的数学 - 你有两个菜单，并且在每个菜单中都有这个代码 - 所以代码看起来两次通过代码而不是单个代码。
解决方案：
1.您需要使用自己的方式覆盖Joomla superfish菜单模块代码 - 只需从那里删除...，好文章here。
2.您需要将上一步中的代码添加到模板文件或模板JS文件的末尾。

Joomla移动菜单冲突

1 个答案: