javascript/Jquery improvement on a .hide() .show() div menu
Question
i am super new to javascript and jquery self thought ....been working on this menu for a bit and i have finally "finished" but iv got some horrendous code and i am looking for ways to improve my code to make it more readable and functional any tips and hints would be helpful. the idea to save space on the page each div will have different parts of a form that the user will fill out here is some of the code
<body>
<div class="content">
<div class="menu" id="menu"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1"></div>
<div class="content" id="1sort"></div>
<div class="menu"id="menu2"></div>
<div class="content" id="sort2"></div>
</div>
<script>
var show = true;
var show2 = false;
var show3 = false;
$('#1sort').hide("fast");
$('#sort2').hide("fast");
$("#menu").click(function () {
if (show == true) {
$('#sort').hide("fast");
$('#1sort').show("fast");
show = false;
show2 = true;
} else if (show == false) {
$('#sort').show("fast");
$('#1sort').hide("fast");
$('#sort2').hide("fast");
show = true;
show2 = false;
show3 = false;
}
});
$("#menu1").click(function () {
if (show2 == true) {
$('#1sort').hide("fast");
$('#sort2').show("fast");
show2 = false;
show3 = true;
} else if (show2 == false) {
$('#1sort').show("fast");
$('#sort').hide("fast");
$('#sort2').hide("fast");
show = false;
show2 = true;
show3 = false;
}
});
$("#menu2").click(function () {
if (show3 == false) {
$('#1sort').hide("fast");
$('#sort').hide("fast");
$('#sort2').show("fast");
show = false;
show2 = false;
show3 = true;
}
});
</script>
4 answers
solution1
1 2012-06-28 11:47:27
A useful technique here is to adorn some extra attributes (preferably html5 data-* ) onto the links to indicate what it's associated content is.
<div class="menu" id="menu" data-content="sort"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1" data-content="1sort"></div>
<div class="content" id="1sort"></div>
<div class="menu" id="menu2" data-content="sort2"></div>
<div class="content" id="sort2"></div>
You can then use this when an item is clicked to hide the currently visible one, and show the required one:
$('.menu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
Live example: http://jsfiddle.net/hAbPa/
solution2
1 ACCPTED 2012-06-28 12:00:54
You can use some basic traversal functions, and .is to determine visibility. You don't need boolean variables nor element IDs that way: http://jsfiddle.net/K2sqy/2/ .
$(".menu").click(function() {
var $next = $(this).next(".content"); // corresponding .content element
var isVisible = $next.is(":visible"); // is it currently visible?
$(this).siblings(".content").hide("fast"); // hide all siblings
$next[isVisible ? "hide" : "show"]("fast"); // toggle the corresponding .content
if(isVisible) {
// it was visible, so now it's hidden. Show the other .content:
// the next or, if not available, the previous
var $second = $next.nextAll(".content").first();
if($second.length === 0) {
$second = $next.prevAll(".content").first();
}
$second.show("fast");
}
});
solution3
0 2012-06-28 11:44:42
You might also consider using jquery .toggle(). More info here.
$('#foo').toggle(showOrHide);
is equivalent to:
if ( showOrHide == true ) {
$('#foo').show();
} else if ( showOrHide == false ) {
$('#foo').hide();
}
solution4
-1 2012-06-28 11:48:58
I'm not 100% sure (untested)... but this is pretty close I think.
$(".menu").click(function (){
$(this).next('.content').toggle();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.