因此,在过去两个小时左右的时间内,我一直在尝试执行一段代码,到目前为止,除了一个关键组件之外,所有其他组件都在工作。
在“标题.menu a”上,单击“导航”以向下滑动并显示所有链接。我还希望在“导航”关闭时将“ .menu”类的背景设置为“#3D3D3D”,然后将其转换为背景“ whitesmoke”。
我一直在'.slideToggle'的处理程序上尝试'addClass'和'removeClass'。
$( 'header .menu a' ).click( function() {
$( 'header nav' ).slideToggle( 'fast', function() {
console.log('Toggle works');
});
});
很抱歉,这是一个愚蠢的问题。我的jQuery经验有限,我很想向你们学习。这是js,css和html的小提琴。
干杯!
在这里,您只需要检查滑块是否打开或不使用变量即可:http : //jsfiddle.net/68zNp/12/
var opened=false;
// Code for header button -- menu.
$( 'header .menu a' ).mouseenter( function() {
console.log("Menu anchor entered");
$( 'header .menu' ).css('background', '#3D3D3D');
$( 'header .menu a' ).css('color', '#F8F7F7');
}).mouseleave( function() {
if(!opened){
console.log("'Menu anchor' left");
$( 'header .menu' ).css('background', 'whitesmoke');
$( 'header .menu a').css('color', '#3D3D3D');
}
});
// Header toggle code
$( 'header .menu a' ).click( function() {
console.log('Ouch, you clicked me!');
if(!opened){
opened=true;
}
else{
opened=false;
}
$( 'header nav' ).slideToggle( 'fast', function() {
console.log('Toggle works');
});
});
// Code for header button -- down.
$( 'header .down a' ).mouseenter( function() {
console.log("'Chevron down' entered");
$( 'header .down' ).css('background', '#FF8B59');
$( 'header .down a' ).css('color', '#F8F7F7');
}).mouseleave( function() {
console.log("'Chevron down' left");
$( 'header .down' ).css('background', 'whitesmoke');
$( 'header .down a').css('color', '#3D3D3D');
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句