3

我在 div 中有一个导航栏（顶部菜单）。如果菜单的宽度大于外部 div 的宽度，我必须隐藏其余的菜单元素。不幸overflow:hidden的是我不能用于 div 。所以我使用 .outerWidth()函数来计算 div 的总宽度和每个 elment(li) 的宽度，并隐藏溢出元素。所以我的问题是它在firefox（19.0），IE（8）中工作正常！，但不是在chrome中。在 chrome 中，所有元素都是隐藏的。当我改变时问题解决了

$(document).ready(function() {});到$(window).load(function() {});

但是随后，总 ul 显示了几分之一秒，然后它被隐藏（IE，FF 它仍然可以正常工作）。有没有更好的解决方案？或者任何不同的逻辑。

样本

<div style="width:300px;" > 
<ul id="menu1">
    <li class="noChild "><a  href="#" >3 Option</a></li>
    <li class="noChild"><a href="#" >2 Option</a></li>
    <li class="noChild "><a  href="#" >1 Option</a></li>
 </ul>
</div >

http://jsfiddle.net/RSA3X/4/

我的类似情况

4

1 回答 1

3

其实解决方法很简单。我把它弄复杂了。在下图中，我们还可以看到加载脚本、图像和 css 的过程。就我而言，我在 CSS 上方添加了脚本链接，例如

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

并且它的负载类似于图像 2。所以我的脚本在加载 css 之前执行。而且我无法获得css的属性。

当我改变位置时

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='menu.js'></script>

我的脚本在完成加载 css（图像 1）后执行。所以现在它完美无缺。

在此处输入图像描述

于 2013-02-28T10:30:07.373 回答