[英]Sidebar Navigation
似乎还不能把我的头缠住。 我有一个带有内容的侧边栏导航。 我想单击父菜单时显示的内容,因此必须隐藏其他内容。 当单击其他父菜单时,其他菜单将隐藏。
这是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.
})
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.