jquery下拉菜单瞬间闪烁

Posted

技术标签:

【中文标题】jquery下拉菜单瞬间闪烁【英文标题】:jquery drop down menu momentary blink 【发布时间】:2012-12-15 23:02:15 【问题描述】:

我正在为一个网站开发一个 jquery/css 下拉菜单。它工作得很好,除了当您在子菜单项之间导航时,由于我使用的 css 边框,选定的主菜单项会改变它的文本颜色一秒钟。这不是很明显,但多年来一直困扰着我!我想保持边框分隔子菜单,但我不想要闪光灯!有什么计时器可以用来解决这个问题吗?或者我可以制作边框使其位于盒子内吗?非常感谢您的帮助!

这里是 jsfiddle:http://jsfiddle.net/BLvKK/1/

注意:我知道使用 css:hover 属性而不是通过 jquery 触发翻转会更经济,我只是在这一点上使用 jquery,因为我正在测试它。

这里是html

<div id = "nav_div">
            <ul id="navigation">
                <li id="home">
                <a href="#" class="nav_style" id="home_a">Home</a>
            </li>
            <li id="sign_ups">
                <a href="#" class="nav_style" id="sign_ups_a">Sign-ups</a>
                <ul class="sub_nav_style" id="sign_ups_sub">
                    <li>
                        <a href="#">Camper Sign-up</a>
                    </li>
                    <li>
                        <a href="#">Junior Counselor Sign-up</a>
                    </li>
                    <li>
                        <a href="#">Counselor Sign-up</a>
                    </li>
                </ul>
            </li>
            <li id="info">
                <a href="#" class="nav_style" id="info_a" name="info_a">Information</a>
                <ul class="sub_nav_style" id="info_sub">
                    <li>
                        <a href="#">Facts You Need</a>
                    </li>
                    <li>
                        <a href="#">Contact Information</a>
                    </li>
                    <li>
                        <a href="#">Vendor Information</a>
                    </li>
                </ul>
            </li>
            <li id="about_camp">
                <a href="#" class="nav_style" id="about_camp_a" name="about_camp_a">About Camp</a>
                <ul class="sub_nav_style" id="about_camp_sub">
                    <li>
                        <a href="#">What People Say</a>
                    </li>
                    <li>
                        <a href="#">Sample Menu</a>
                    </li>
                    <li>
                        <a href="#">Photos</a>
                    </li>
                </ul>
            </li>
            <li id="donate">
                <a href="#" class="nav_style" id = "donate_a">Make a Donation</a>
            </li>
        </ul>

这是css:

ul
margin:0 auto;
padding:0;
list-style-type:none;

a
text-decoration:none;

#nav_div
width:100%;
height:36px;
background:#b9bbbd;
text-align:center;
z-index:1;

ul#navigation
text-align:center;
float:left;

ul#navigation li
float:left;
min-width:170px;
font-size:13px;

ul.sub_nav_style 
position:absolute;
display:none;
padding-top: 10px;


ul.sub_nav_style li
font-family:Tahoma, Geneva, sans-serif;
clear:both;
background:#b9bbbd;
border-bottom:1px solid #999999;

ul.sub_nav_style li a
color:#FFFFFF; 

a,
a:active,
a:visited 
display:block;
padding:10px;

.nav_style
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
background:#b9bbbd;
color:#FFFFFF;

.nav_style:hover
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
background:#114878;
color:#000000;

.nav_style_roll_off
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
background:#b9bbbd;
color:#114878;

.sub_nav_style_bround_roll
background:#25313d;

这是 JQuery:

// javascript Document
$(document).ready(function() 

    //sub rolls sign ups
    $("ul#navigation li#sign_ups ul li:eq(0) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#sign_ups_a").toggleClass("nav_style_roll_off");
    );
    $("ul#navigation li#sign_ups ul li:eq(1) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#sign_ups_a").toggleClass("nav_style_roll_off");
    );
    $("ul#navigation li#sign_ups ul li:eq(2) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#sign_ups_a").toggleClass("nav_style_roll_off");
    );
    // sup rolls info
    $("ul#navigation li#info ul li:eq(0) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#info_a").toggleClass("nav_style_roll_off");
    );
    $("ul#navigation li#info ul li:eq(1) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#info_a").toggleClass("nav_style_roll_off");
    );
    $("ul#navigation li#info ul li:eq(2) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#info_a").toggleClass("nav_style_roll_off");
    );
    //sub rolls about_camp
    $("ul#navigation li#about_camp ul li:eq(0) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#about_camp_a").toggleClass("nav_style_roll_off");
    );
    $("ul#navigation li#about_camp ul li:eq(1) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#about_camp_a").toggleClass("nav_style_roll_off");
    );
    $("ul#navigation li#about_camp ul li:eq(2) a").hover(function() 
        $(this).toggleClass("sub_nav_style_bround_roll");
        $("#about_camp_a").toggleClass("nav_style_roll_off");
    );
);
//slide toggles
$("#sign_ups").hover(function() 
    $("#sign_ups_sub").slideToggle('fast');
);
$("#info").hover(function() 
    $("#info_sub").slideToggle('fast');

);
$("#about_camp").hover(function() 
    $("#about_camp_sub").slideToggle('fast');
);

​ ​​​ ​

再次感谢!

【问题讨论】:

【参考方案1】:

如果您只希望文本保持白色,只需从各处删除.toggleClass("nav_style_roll_off");

更新: 要消除闪烁:http://jsfiddle.net/BLvKK/7/

【讨论】:

感谢您的回答!但是,当您滚动相应的子菜单时,我希望主导航中的文本变为蓝色。 对不起,我希望我现在理解你了,如果你想删除闪烁效果/错误,更新的链接可以做到这一点。希望这是你需要的

以上是关于jquery下拉菜单瞬间闪烁的主要内容,如果未能解决你的问题,请参考以下文章

20款jquery下拉导航菜单特效代码分享

Jquery下拉菜单单击始终打开

Jquery 没有关闭下拉菜单

jQuery 如何实现 “鼠标悬浮下拉菜单” 效果?

jQuery 下拉问题(无法保持子菜单可见)

jQuery 下拉菜单问题