jQuery 左侧菜单展开、闭合 &三元运算

最新推荐文章于 2021-05-18 15:06:59 发布

weixin_30593443

最新推荐文章于 2021-05-18 15:06:59 发布

阅读量113

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/a10086/p/9393692.html

版权

点击展开，再点闭合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: aquamarine;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div style="height: 400px;width: 200px;border: 1px solid red">
    <div class="item">
        <div class="header">菜单一</div>
        <div class="content hide">内容一</div>
        <div class="content hide">内容二</div>
    </div>
    <div class="item">
        <div class="header">菜单二</div>
        <div class="content hide">内容一</div>
        <div class="content hide">内容二</div>
    </div>
    <div class="item">
        <div class="header">菜单三</div>
        <div class="content hide">内容一</div>
        <div class="content hide">内容二</div>
    </div>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
    $('.header').click(function () {
        //$(this).siblings('.content').removeClass('hide');  //取兄弟节点去掉class属性hide
        var v = $(this).siblings('.content')
        v.hasClass('hide')? v.removeClass('hide'):v.addClass('hide');//判断样式进行反选 && 三元运算 
        $(this).parent().siblings().find('.content').addClass('hide') //父节点的兄弟节点，下面找content的节点，去掉hide
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/a10086/p/9393692.html

weixin_30593443

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 左侧菜单展开、闭合 &三元运算

点击展开，再点闭合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ ...
复制链接

扫一扫