jQuery: Close What's Open, Open What's Closed
I am working on a simple accordion-like vertical menu:
http:/开发者_StackOverflow/www.cybart.com/bscg/
Clicking on OUR SOLUTIONS, PRODUCT COVERAGE, OUR TEAM or CONTACT US opens or closes the submenus.
However, if you click on two or more of those links in a row, all the submenus will open.
I want the first click on any of the menu items to open its submenu and close those that are currently open. The second click should just close the submenu of the link being clicked.
I would be grateful for the expertly advice.
Check out the jQuery :visible selector. On the click event, slide up whichever one is already visible and slide down the one you want to open.
EDIT: Here's a code snippet I used in the past to do this. Note I am using definition lists (dl, dt, dd) instead of your unordered lists (ul and li), but you can adapt the code:
$("dt span").click(function () {
var dd = $(this).parent().next();
if (dd.is(":visible")) {
dd.slideUp("slow");
} else {
$("dd:visible").slideUp("slow");
dd.slideDown("slow");
}
});
Hope this helps!
EDIT: Actual code as requested by the OP:
<html>
<head>
<title>Accordion</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
<ul id="access">
<!-- Use spans so that only clicks on the item name are processed -->
<li><span class="item">Item 1</span>
<ul>
<li>Item 1 - A</li>
<li>Item 1 - B</li>
<li>Item 1 - C</li>
</ul>
</li>
<li><span class="item">Item 2</span>
<ul>
<li>Item 2 - A</li>
<li>Item 2 - B</li>
<li>Item 2 - C</li>
</ul>
</li>
<li><span class="item">Item 3</span>
<ul>
<li>Item 3 - A</li>
<li>Item 3 - B</li>
<li>Item 3 - C</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
// All sections rolled up to start
$("ul#access ul").hide();
// Open or close as necessary
$("span.item").click(function () {
var ul = $(this).next();
if (ul.is(":visible")) {
ul.slideUp("slow");
} else {
$("ul#access ul:visible").slideUp("slow");
ul.slideDown("slow");
}
});
});
</script>
</body>
</html>
Explanation: I used spans so that only the text of each item triggers the accordion behavior. When a span is clicked on, we say $(this).next() to get to the inner ul. If you don't use spans and you attach the click handler to the outer li, then clicks inside the submenu will trigger the closing of the outer li.
加载中,请稍侯......
精彩评论