【发布时间】：2014-04-22 15:37:01
【问题描述】：
我正在开发 Joomla 网站。这是网站的link。这个有两个菜单的网站在桌面大小的屏幕上运行良好，但在智能手机上查看时，比如 iphone 5
它显示八个下拉菜单而不是两个。
这是在 iphone 上查看 this link 时的图像：
。
当只有一个菜单时，该页面在移动设备上可以正常打开。我也看不到任何类型的 js 冲突。我应该从哪里开始诊断问题？
谢谢。
编辑：只有两个菜单模块也只在内部链接上，其中一个在此处发布。我在此处发布了 superfish 菜单模板代码：
<?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);
【问题讨论】：