jQuery点击展开折叠手风琴导航菜单详解

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了手风琴式导航菜单效果。

代码实例如下:

]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}
.nav {
  width: 200px;
  height: auto;
  margin: 50px auto;
}
.nav li span {
  width: 185px;
  height: 45px;
  line-height: 45px;
  color: #333;
  display: block;
  padding-left: 15px;
  background: #999 ;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}
.side_nav {
  display: none;
}
.side_nav li {
  width:185px;
  height:45px;
  line-height:45px;
  background:#ccc;
  color:#333;
  display:block;
  padding-left: 15px;
  border-bottom: 1px solid #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $(".nav li span").click(function(){
    if ($(this).siblings('ul').css('display')=='none') {
      $(this).siblings('ul').slideDown(100);
    }else{
      $(this).siblings('ul').slideUp(100);
    }
  });
});
</script>
</head>
<body>
  <ul class="nav">
    <li>
      <span>犀牛前端部落一</span>
      <ul class="side_nav">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>
      <span>犀牛前端部落二</span>
      <ul class="side_nav">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>
      <span>犀牛前端部落三</span>
      <ul class="side_nav">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
  </ul>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

* {
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}

进行一些初始化操作,设置内外边距为0,去掉列表的默认样式或者元素的默认边框。

.nav {
  width: 200px;
  height: auto;
  margin: 50px auto;
}

设置导航菜单容器元素的相关样式。

宽度是200px,高度是auto,也就是可以根据内容元素的变化。

使用margin设置其水平居中。

.nav li span {
  width: 185px;
  height: 45px;
  line-height: 45px;
  color: #333;
  display: block;
  padding-left: 15px;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

这个span元素用来防止主导航的文本内容。

通过display: block将其设置为块级元素,这样就可以设置其尺寸了。

.side_nav {
  display: none;
}

设置二级导航在默认状态下为隐藏。

.side_nav li {
  height:45px;  
  width:185px;
  line-height:45px;
  background:#ccc;
  color:#333;
  display:block;
  padding-left: 15px;
  border-bottom: 1px solid #fff;
}

设置里元素的相关样式,也就是二级导航每一个栏目的样式。

$(document).ready(function(){
  //code
})

当文档结构完全加载完毕再去执行函数中的代码。

$(".nav li span").click(function(){
  //code
})

为主导航注册click事件处理函数。

if ($(this).siblings('ul').css('display')=='none') {
  $(this).siblings('ul').slideDown(100);
}else{
  $(this).siblings('ul').slideUp(100);
}

判断当前点击的主导航span元素的兄弟ul元素是否是隐藏。

如果隐藏就下拉展开,否则就收缩。

二.相关阅读:

(1).click可以参阅jQuery click事件一章节。

(2).siblings可以参阅jQuery siblings()一章节。

(3).css()可以参阅jQuery css()一章节。

(4).slideDown()可以参阅jQuery slideDown()一章节。

(5).slideUp()可以参阅jQuery slideUp()一章节。

jQuery点击展开折叠手风琴导航菜单详解,这样的场景在实际项目中还是用的比较多的,关于jQuery点击展开折叠手风琴导航菜单详解就介绍到这了。

jQuery点击展开折叠手风琴导航菜单详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容