Question

任何人都请告诉我加载产品子菜单有什么问题。

这是链接：

http://www.lexurcapacitor.com/index.html

这是css链接：

http://www.lexurcapacitor.com/css/style.css

Answer 1

我发现由于<script src="js/dualflow.js"></script>文件中的代码，菜单会闪烁;

c("#header-nav").delegate("li","mouseenter mouseleave",function(f){

当<nav id="header-nav">内的 li 元素触发mouseenter或mouseleave事件时执行此代码。这段代码的缺点是，它也考虑了子菜单中的 li ！

我得到的最简单的解决方案是为第一个菜单项的 li 元素创建一个类（例如：Home，About，Products ... ）

HTML更新

<nav id="header-nav">
        <ul>
            <li class="current menu">
                <a href="index.html">Home</a>
            </li>
            <li class="menu">
                <a href="about.html">About</a>
            </li>                       
            <li class="menu">
                <a href="msc.html">Products</a>
                <ul>
                    <li>
                        <a href="msc.html">Motor Start Capacitor</a>
                        </li>   
                        <li>
                            <a href="mrc.html">Motor Run Capacitor</a>
                        </li>   
                        <li>
                            <a href="tc.html">Terminal Capacitor</a>
                        </li>   
                        <li>
                            <a href="bstc.html">Box Square Type Capacitor</a>
                        </li>   
                        <li>
                            <a href="flc.html">Fluorescent Lighting Capacitor</a>
                        </li>
                        <li><a href="fc.html">Fan Capacitor</a>
                        </li>                   
                    </ul>
                </li>  
                <li class="menu">
                    <a href="needus.html">Need us</a>
                </li>
                <li class="menu">
                    <a href="network.html">Network</a>
                </li>
                <li class="menu">
                    <a href="certificate.html">Certificates</a>
                </li>
                <li class="menu">
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>

dualflow.js更新

使用以下代码更新dualflow.js文件（添加类'menu'）

<击> c("#header-nav").delegate("li","mouseenter mouseleave",function(f){

c("#header-nav").delegate("li.menu","mouseenter mouseleave",function(f){

多级下拉菜单在html中闪烁

1 个答案: