javascript - Terrible dropdown behavior using a toggleClass -
i having bit of issue, creating dropdown menu system dynamically pass ajax content dropdown. but, issue isn't ajax, rather stupid menu behavior coded. every time user clicks 1 of buttons, execute toggleclass closing menu , requiring user click again re-appear. (not intuitive) want dropdown remain open, unless user clicks button opened it.
$(document).ready(function(){ $('#reviews').click(function(){ $('.reviews_closed').toggleclass('reviews_open'); $('.reviews_closed').empty(); $('.reviews_closed').append("<div class='dropdown_wrapper'> </div>"); $('.dropdown_wrapper').html("<em style='color:maroon;text-align:center;margin:auto;'> loading... </em>"); $('.dropdown_wrapper').load("/ajax/", {section: 'articles', category: 'review', limit: '5', form: 'dropdown_reviews', action: 'article'}, function () { $('div').fadein('slow'); }); }); $('#features').click(function(){ $('.reviews_closed').toggleclass('reviews_open'); $('.reviews_open').empty(); $('.dropdown_wrapper').html("<em style='color:maroon;text-align:center;margin:auto;'> loading... </em>"); $('.reviews_closed').append("<div class='dropdown_wrapper'> </div>"); $('.dropdown_wrapper').load("/ajax/", {section: 'articles', category: 'feature', limit: '3', form: 'dropdown_features', action: 'article'}, function () { $('div').fadein('slow'); }); });
i apologize bad coding practices, it's mess know. glad whatever can get.
forgot include jsfiddle, here go: http://jsfiddle.net/ikethepike/m2g82/6/
first thing see if click reviews toggle class open select close way.. that's first fix.
second thing checking how css behaves , finally... give jsfiddle exampole play @four_lo suggested
Comments
Post a Comment