好的。我有一个用HTML设计的标题-但是,每次我将鼠标悬停在产品上,然后单击ANY子菜单时,我都无法(它们在被点击之前便消失了)。
可以在http://www.bwl-ny.com上看到一个实时示例。
有什么建议?
$(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
<!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] 删除。
我来说两句