似乎还不能把我的头缠住。我有一个带有内容的侧边栏导航。我想单击父菜单时显示的内容,因此必须隐藏其他内容。单击其他父菜单时,其他菜单将隐藏。
这是CSS
.sidebarContainer {
position: relative;
background: #f1f2f3;
width: 80%;
margin:auto;
margin-bottom: 2%;
padding: 1%;
overflow: hidden;
border:blue;
height:auto;
clear:both;
border:5px solid yellow;
}
.sidebarheading {
width:15% auto;
border:5px solid green;
}
.sidebarContainer .sidebarheading > .sidebarContent {
position:relative;
float: right;
border:5px solid red;
right:450px;
这是HTML
<div class="sidebarContainer">
<div class="sidebarheading">
<h1>Heading1</h1>
<div class="sidebarContent">
<p class="content2">Hey Wassup</p>
</div>
</div>
<div class="sidebarheading">
<h1>Heading2</h1>
<div class="sidebarContent">
<p class="content1">Hey Wassup</p>
</div>
</div>
这是jQuery
<script>
$(document).ready(function () {
$('.sidebarheading').click(function () {
$('.sidebarContent').hide('slow', function () {
$('.sidebarContent').html($('sidebarContent').html());
$('.sidebarContent').fadeIn('slow');
})
})
})
边界用于测试目的。任何帮助,将不胜感激 :)
最佳答案
像这样?
$(document).ready(function () {
$('.sidebarContent:gt(0)').hide(); // Show the first one by default
$('.sidebarheading').click(function () {
var $this = $(this);
$('.sidebarContent').hide('slow', function () { // On click hide all
$this.find('.sidebarContent').fadeIn('slow'); //show the content which is inside the clicked heading.
})
})
})
Fiddle
关于jquery - 侧边栏导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17356505/