HTML标题菜单下拉菜单无法单击

盖·理查兹(Guy Richards)

好的。我有一个用HTML设计的标题-但是,每次我将鼠标悬停在产品上,然后单击ANY子菜单时,我都无法(它们在被点击之前便消失了)。

可以在http://www.bwl-ny.com上看到一个实时示例

有什么建议?

Custom.js

$(document).ready(function() {

//INITIALIZES PRETTYPHOTO PLUGIN

    $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'}); //choose between different styles / dark_rounded / light_rounded / dark_square / light_square / facebook /

//INITIALIZES TWITTER FEED PLUGIN

    $('.twitter-feed').tweet({
        username: 'ABrighterWorld',  //just enter your twitter username
        join_text: 'auto',
        avatar_size: null,
        count: 2, //number of tweets showing
        auto_join_text_default: '',
        loading_text: 'loading latest tweets...' //text displayed while loading tweets
    });

// FLICKR PLUGIN

    $('#flickr-images').append('<ul></ul>');

    $('#flickr-images ul').jflickrfeed({
        limit: 10,
        qstrings: {
            id: 'myflickrID', // enter Flickr ID i.e. 67956216@N02  
            tags: 'tags-here'  // Displays images with selected tags (optional)
        },

        itemTemplate: '<li><a href="{{image_b}}" rel="prettyPhoto" ><img src="{{image_s}}" alt="{{title}}" /></a></li>'

        }, function(data) {
            $('#flickr-images li a').prettyPhoto({theme:'light_square'});
        });


// TEXTBOX ACTIVE

    $('.textbox, #message, #comment').focus(function (){
        $(this).css({borderColor : '#bbb'});
            $(this).blur(function (){
                $(this).css({borderTopColor : '#d1d1d1', borderLeftColor : '#d1d1d1', borderBottomColor : '#e1e1e1', borderRightColor : '#e1e1e1'});
            });
    });



//TAB NAVIGATION

    $('ul.tab-nav').tabs('.tabs > .tab-panels > div', {effect: 'fade'});


// PORTFOLIO HOVER EFFECT - OVERLAY

    $('.gallery-overlay a img').hover(function() {      
        $(this).stop().animate({ 
            opacity : '.1'
        }, 300);
            }, function() {
                $(this).stop().animate({ 
                    opacity : '1' 
                }, 500);
            }); 


// PORTFOLIO FILTER             

    $('ul#filter a').click(function() {
        $(this).css('outline','none');
        $('ul#filter .active-filter').removeClass('active-filter');
        $(this).parent().addClass('active-filter');

        var filterVal = $(this).attr('href').toLowerCase().replace(' ','-');

        if(filterVal == 'all') {
            $('ul.gallery-thumbs li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
            $('ul.gallery-thumbs li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }

        return false;
    }); 


//TOGGLE PANELS

    $('.toggle-content').hide();  //hides the toggled content, if the javascript is disabled the content is visible

    $('.toggle-header a').click(function () {       

        if ($(this).is('.tog-close')) {
            $(this).removeClass('tog-close')
            .addClass('tog-open')
            .closest('.toggle-header')
            .next('.toggle-content')
            .slideToggle(300);
            return false;
        }       
        else {
            $(this).removeClass('tog-open')
            .addClass('tog-close')
            .closest('.toggle-header')
            .next('.toggle-content')
            .slideToggle(300);
            return false;
        }
    }); 


// TOOLTIPS

    $('.social-links li[title]').tooltip({
        effect: 'fade',
        fadeInSpeed: 300,
        fadeOutSpeed: 200,
        opacity: 0.9,
        offset: [-5, 0]     
    }); 


// SOCIAL LINKS

    $(function() {
        $('.social-links li').animate({
            opacity : '.4'  // sets the opacity to 50% to all social link images
        }); 

        $('.social-links li').hover(function() {  
            $(this).stop().animate({ 
                opacity: '1'  // on hover sets the opacity to 100% to all social link images
            });
        }, function() {
                $(this).stop().animate({ 
                    opacity : '.4'
                });
            });
    });


// SCROLL TOP   

    $('.scroll-top').hover(function() {     
        $(this).stop().animate({ 
            opacity : '1'
        }, 300);
            }, function() {
                $(this).stop().animate({ 
                    opacity : '.6' 
                }, 500);
            }); 

    $('.scroll-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });


//NAVIGATION DROPDOWN ANIMATION 

    $('#navigation ul').css({display: 'none'}); // Opera Fix

    $("ul#navigation").superfish({
            hoverClass:    'dropdown',          // the class applied to hovered list items 
            pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page 
            pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass 
            delay:         1000,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing 
            animation:     {opacity:'show',height:'show'},     // an object equivalent to first parameter of jQuery’s .animate() method 
            speed:         'fast',           // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method 
            autoArrows:    false,               // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance 
            dropShadows:   false    
    });


// IE Button hover fix  
$(function (){  

    var button = $('.button');

    if ($.browser.msie) {
        $(button).css( {backgroundPosition: "-20px 35px"} ).hover(function() {      
            $(this).stop()
                .animate({ 
                    backgroundPositionX: "-20px",
                    backgroundPositionY: "94px"             
                },300);

                }, 
                function() {
                    $(this).stop().animate({ 
                    backgroundPositionX: "-20px",
                    backgroundPositionY: "35px"             
                },300).css({backgroundPosition: "-20px 35px"});
            });
        }       
});


}); //END of jQuery

HTML来源:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Brighter World Lighting - NY</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--imports the main css file-->
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <!--imports prettyPhoto css file-->
    <link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
    <!--imports jquery-->
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <!--imports twitter feed plugin-->
    <script type="text/javascript" src="js/jquery.tweet.js"></script>
    <!--imports easing plugin-->
    <script type="text/javascript" src="js/easing.js"></script>
    <!--imports prettyPhoto plugin-->
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <!--imports jQuery Tools plugin-->
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <!--imports jQuery superfish plugin-->
    <script type="text/javascript" src="js/superfish.js"></script>
    <!--imports jQuery jflickrfeed plugin-->
    <script type="text/javascript" src="js/jflickrfeed.min.js"></script>
    <!--imports jQuery AsyncSlider plugin-->
    <script type="text/javascript" src="js/jquery.asyncslider.min.js"></script>
    <!--imports custom javascript code-->
    <script type="text/javascript" src="js/custom.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            // Setup Slider
            $("#async-slider").asyncSlider({
                keyboardNavigate: true,
                easing: 'easeInOutExpo',
                minTime: 600,
                maxTime: 1500,
                autoswitch: 4800,
                centerPrevNextNav: false,
                slidesNav: false
            });
        });
    </script>
    <!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->
    <!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" />
    <![endif]-->
</head>

<body>
    <div id="header" class="pattern-1">
        <div id="header-inner">
            <div id="logo">
                <img src="img/logo.png" alt="image description" />
                <div id="title">
                    <h1><a href="index.asp"></a></h1>
                    <p></p>
                </div><!-- end title -->
            </div><!-- end logo -->
            <ul id="navigation">
                <li>
                    <a class="active-nav" href="index.asp">Home</a>
                </li>
                <li>
                    <a href="partnership.html">
                        Energy Partnership Program
                    </a>
                </li>
                <li>
                    <a href="http://bwl.ereverseauction.com">
                        Energy Auction
                    </a>
                </li>
                <li>
                    <a href="#">Affiliates</a>
                </li>
                <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-23">
                    <a href="products.html">Products</a>
                    <ul class="sub-menu">
                        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-31">
                            <a href="indoor.html">Indoor Lighting</a>
                        </li>
                        <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
                            <a href="outdoor.html">Outdoor Lighting</a>
                            <ul class="sub-menu">
                                <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://brighterworldlightingllc.com/excelsior-series/">Street Lighting</a></li>
                            </ul>
                        </li>
                        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://brighterworldlightingllc.com/outdoor-lighting/">OEM/ODM Support</a></li>
                    </ul>
                </li>
                <li>
                    <a href="about.asp">About Us</a>
                </li>
                <li>
                    <a href="contact.html">Contact Us</a>
                </li>
            </ul><!-- end navigation -->
奥杰

这是因为CSS规则。它在文件style.css 557行中,是media =“ screen”的选择器#navigation ul margin-top: 24px这会将子代UL推到父代下方,因此当您将父代悬停时,它会显示出来,但是当您向下移动时,您便会从父代元素移到该子代的顶部边缘,因此您不再需要将父代悬浮孩子不见了。这个最高边距在它们之间造成了“缝隙”,因此您必须非常快地保持悬停事件以使孩子保持打开状态。我可能会将其更改为填充?但是您需要将背景颜色从UL更改为LI,或者可能会在悬停事件中添加延迟,以使它们有时间向下移动到子元素,但是如果它们悬停在间隙中,它可能仍会消失他们

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Tablesorter:无法单击标题中的下拉菜单

来自分类Dev

单击下拉菜单

来自分类Dev

无法使用Selenium单击下拉菜单

来自分类Dev

HTML 下拉菜单

来自分类Dev

无法在HTML中创建下拉菜单

来自分类Dev

HTML 下拉菜单无法正常工作

来自分类Dev

下拉菜单无法正常工作。(html)

来自分类Dev

单击下拉菜单滚动

来自分类Dev

单击jQuery或JavaScript菜单下拉菜单

来自分类Dev

无法通过Java / Selenium单击Bootstrap下拉菜单

来自分类Dev

无法在iframe中单击下拉菜单-Selenium Python

来自分类Dev

python硒无法单击下拉菜单中的隐藏元素

来自分类Dev

无法单击下拉菜单项中的元素

来自分类Dev

单击后无法打开Bootstrap下拉菜单

来自分类Dev

无法通过 xpath 单击登录下拉菜单

来自分类Dev

无法找到下拉菜单

来自分类Dev

无法找到下拉菜单

来自分类Dev

HTML下拉菜单:仅选定菜单

来自分类Dev

下拉菜单HTML + CSS

来自分类Dev

html CSS下拉菜单

来自分类Dev

HTML / VBA下拉菜单

来自分类Dev

HTML to PHP下拉菜单

来自分类Dev

HTML下拉菜单透明

来自分类Dev

下拉菜单,标题垂直居中

来自分类Dev

平板电脑上的基础顶部栏/菜单垂直下拉菜单无法单击

来自分类Dev

Selenium 无法从引导程序下拉菜单中单击菜单项

来自分类Dev

单击后关闭下拉菜单

来自分类Dev

jQuery-单击下拉菜单

来自分类Dev

单击下拉菜单不会转到链接