好的,我不久前做了一个网站,但总是遇到需要菜单系统的问题。基本上,您单击地图上的一个位置,然后它会在右侧的下拉菜单中显示子位置列表。这些始终是他们根据选项类显示的机会。
我已经把网站放在 shiftera.co.uk 上,这样你就可以看到他们的了。
先说问题。1) IE - 列表从不过滤掉,它始终显示所有结果,无论类别如何。2) Chrome - 下拉列表有时会被压扁,显示 1 个结果并隐藏您需要使用向上/向下箭头更改的其他结果,有时显示 3,有时显示 4。 3) Firefox - 列表显示为 1 长行,不像通常的下拉菜单。
我认为这个问题更多的是一个 css 问题或许多 css 问题。
地图链接的一个例子是
<a href="Scotland#browse" class="areaselect" id="Scotland" title="Scotland">Scotland</a>
下拉列表虽然没有分开,但从数据库中生成,如下所示
<option value='AB25 1UH' class="Scotland">Aberdeen</option><option value=' WA14 4DW' class="Northwest">Altrincham</option>
如您所见,有些有空间,有些则没有。下拉列表的 id 为 apick,我使用下面的 css 在加载时隐藏它。
#apick { display: none; }
这是基于地图点击显示正确项目的javascript。
//<![CDATA[
$(document).ready(function(){
$('.areaselect').on('click', function(event){
$('#apick').css('display','inline');
var id = $(this).attr('id')
$('#apick option').not('.'+id).css('display','none');
$('.'+id).css('display','inline').first().attr('selected','selected');
event.preventDefault();
});
}); //]]>
这已经让我发疯了很长时间,似乎如果我修复 1 个问题,就会创建另一个 2-3 个问题。所以我想我会在这里尝试一下,看看是否有任何brightspark可以缩小我的问题。
- 根据对主网站的更改更新了删除 Windows 负载。