Home › Forums › JavaScript › jQuery Dropdown question…
- This topic is empty.
-
AuthorPosts
-
June 23, 2009 at 11:48 am #25017Eraser35Member
So I have a basic dropdown (this <li> is within a larger <ul> that has other dropdown items, so I didn’t post the code for the <ul>):
Code:When user clicks on "Profile" the sub-navigation shows with jQuery, and when clicks the "Profile" button again, the sub-navigation fades away… In addition when "Profile" button is clicked, it receives a grey background color for its box-model as well as the text turns white from black.. Similar functionality to your title bar dropdowns in your Mac OS Leopard.
Code:$(‘#profile a’).click(function(){
if ($(‘.sub-navigation’).is(“:hidden”)){
$(‘.sub-navigation’).show();
$(‘#profile’).css( {“background-color”: “#888888”});
$(‘#profile a:first’).css( {“color”: “#FFFFFF”});}
else {
$(‘.sub-navigation’).fadeOut();}
});Issue: Right now, the only way to deactivate (fade away) the sub-navigation is for the user to click the profile button and the sub-nav fades away. However, the "Profile" button with its grey background and white text still remains. So, I would like for everything to go back to its normal unclicked state when the profile button is deactivated. Also, just like in an operating system, i.e. Mac/Windows, when you click anywhere else on the screen the dropdown list deactivates in the same way as if you were to click the button (in this case Profile) to deactivate it. I would like this to also trigger the same response.
Thanks for looking into my issues.
June 23, 2009 at 1:43 pm #59574Eraser35Membera little bit better…
jQuery:
$(‘#profile a’).click(function(){
if ($(‘.sub-navigation’).is(":hidden")){
$(‘.sub-navigation’).show();
$(‘#profile’).addClass("selectedbgcolor");
$(‘#profile a:first’).addClass("selectedfontcolor");}
else {
$(‘.sub-navigation’).fadeOut();
$(‘#profile’).removeClass("selectedbgcolor");
$(‘#profile a:first’).removeClass("selectedfontcolor");}
});CSS:
.selectedbgcolor {
background-color: #888888;
}.selectedfontcolor {
color: #FFFFFF;
}I can’t get .selectedfontcolor to work. Also, I would like for .selectedbgcolor to fadeOut just like the sub-nav does instead of just being removed.. I’m new to jQuery and JS so excuse me if I don’t know what I am doing :)
June 29, 2009 at 11:17 am #59869Mr KiTT3NMemberYou cannot fade out a selector
Instead of doing .removeClass(‘#id’)you need to do .stop().animate({‘backgroundColor’ : ‘#888888’}, 2000)
hope that helps
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.