Accordian menu - how to keep first div open by default [closed]
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$('.button').click(function()
{
$('.content').slideUp('normal');
$(this).next().slideDown('normal');
$(".button1").removeClass().addClass("button");
$(this).removeClass().addClass("button1");
});
});
</script>
<style>
li { list-style:none;}
.button { width: 800px; float: left; background:green; color:#fff; cursor: pointer;}
.button1 { width: 800px; float: left; background:blue; color:#fff; cursor: pointer;}
.开发者_JAVA百科content { width: 800px; float: left; background: #95B1CE; display: none; }
</style>
</head>
<body>
<ul>
<li class="button">accordian button</li>
<li class="content">Content 1</li>
<li class="button">accordian button</li>
<li class="content">Content 2</li>
<li class="button">accordian button</li>
<li class="content">Content 3</li>
</ul>
</body>
</html>
You should use ids to reference your elements. Also I don't think your html structure is the best one.
I personally recommend using something like this:
<ul>
<li class="selected" id="button1">
<div class="button">accordion button</div>
<div class="content">Content 1</div>
</li>
<li id="button2">
<div class="button">accordion button</div>
<div class="content">Content 2</div>
</li>
<liid="button3">
<div class="button">accordion button</div>
<div class="content">Content 3</div>
</li>
</ul>
Now that the first one is selected by default, use css.
.content {
display: none;
}
.selected .content {
display: block;
}
The script should also change:
$(".button").click(function () {
var selected = $(".selected");
selected.children(".content").slideUp();
selected.removeClass("selected");
var button = $(this);
button.next().slideDown();
button.parent().addClass("selected"); // optional
});
Not tested but I think it's understandable.
Add $(".content:eq(0)").show(); after $(".content").hide();
Actually $(".content").hide(); is not required. Your are making display:none in css
it will work jsfilddle
find below full Js:
$(document).ready(function() {
//$(".content").hide();
$(".content:eq(0)").show();
$('.button:eq(0)').addClass('button1');
$('.button').click(function()
{
$('.content').slideUp('normal');
$(this).next().slideDown('normal');
$(".button").removeClass("button1");
$(this).addClass("button1");
});
});
加载中,请稍侯......
精彩评论