jQuery show/hide siblings
I have this block of code that is intended to first hide all related elements but the first. This, it does fine. Next, it should show/hide these elements based upon which item is selected. But that part doesn’t work. Thoughts?
jQuery:
$("#accordion dl:not(:first-child)").hide(); //hide all but first
$("#menu_list a").click(function (){
var selected = this.name; //get ID from <a> name
$('#'+selected).show('slow').siblings().hide('slow'); //show ID by selected name, hide the rest
});
HTML:
<div id="menus">
<ul id="menu_list">
<li><a href="" class="menuselect" name="menu1">Menu_1</a></li>
<li><a href="" class="menuselect" name="menu2">Menu_2</a></li>
<li><a href="" class="menuselect" name="menu3">Menu_3</a></li>
</ul>
<div id="accordion">
<dl id="menu1">
<dt>
<h3>Menu 1 Item 1</h3>
</dt>
<dd>
<p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>
</dd>
</dl>
<dl id="menu2">
<dt>
<开发者_运维问答;h3>Menu 2 Item 1</h3>
</dt>
<dd>
<p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>
</dd>
</dl>
<dl id="menu3">
<dt>
<h3>Menu 3 Item 1</h3>
</dt>
<dd>
<p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>
</dd>
</dl>
</div>
</div>
EDIT: SOLVED -
Ok, I got it. Since I had the selection attached to a link it kept refreshing the page on click. So it was technically working but then hiding again because the page was being refreshed.
$("#accordion dl:not(:first-child)").hide();
$("#menu_list a").click(function ( e ) {
var selected = this.name;
$('#'+selected).show('slow').siblings().hide('slow');
e.stopPropagation();
return false;
});
This should work. Note that in your code, you are missing the first </dl>
Live Demo: http://jsfiddle.net/wVJ52/
$("#accordion dl:not(:first-child)").hide(); //hide all but first
$("#menu_list a").click(function () {
$('#accordion dl').hide('fast');
$('#pnl'+this.name).show('fast');
});
Live Demo
Seems to be working for me, or maybe I am not fully understanding the question. The one thing I noticed was your missing a closing <dl>
tag for the first item. After I added that they all seemed to work fine.
精彩评论