jquery——简单的下拉列表制作及bind()方法的示例

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_30572613

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yehui-mmd/p/5939940.html

本文介绍了一个使用jQuery实现的菜单展开与折叠效果案例。通过简单的HTML结构与jQuery的事件绑定，可以轻松创建响应用户点击行为的下拉菜单。文章详细解释了如何使用jQuery的bind方法来控制二级菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery练习1</title>
    <style>
    *{
        list-style: none;
        text-decoration: none;
        padding: 0;
        margin: 0 auto;
     }
     .level1{
          width:100px;
         height:auto;
         line-height:35px;
         background-color:pink;
         border-bottom:1px solid #999;
     }
     .level2 li{
         text-align:center;
         width:100px;
         height:35px;
         line-height:35px;
         background-color:#ccc;
         border-bottom:1px solid #999;
     }
     .level1:hover{
         background-color:yellow;
     }
     .level2 li:hover{
        background-color:yellow;
     }
     .level2{
         display:none;
    }
    .current{
          color:red;
     }
    </style>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".level1>a").bind("click",function(){
            if($(this).next().is(":visible")){
                $(this)
                .addClass("current")
                .next()
                .hide()
                .parent()
                .siblings()
            .children("a")
            .removeClass("current")
            .next()
            .hide();
            return false;
            }else{
                $(this)
                .addClass("current")
                .next()
                .show()
                .parent()
                .siblings()
            .children("a")
            .removeClass("current")
            .next()
            .hide();
            return false;
            }
        })
         
    })
    </script>  
</head>
<body>
<div class="box">
    <ul class="menu">
        <li class="level1" id="level1">
            <a href="#">衬衫</a>
            <ul class="level2" id="level2">
                <li><a href="#">短袖衬衫</a></li>
                <li><a href="#">长袖衬衫</a></li>
                <li><a href="#">短袖T恤</a></li>
                <li><a href="#">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1" id="level1">
            <a href="#">卫衣</a>
            <ul class="level2" id="level2">
                <li><a href="#">开衫卫衣</a></li>
                <li><a href="#">套头卫衣</a></li>
                <li><a href="#">运动卫衣</a></li>
                <li><a href="#">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1" id="level1">
            <a href="#">裤子</a>
            <ul class="level2" id="level2">
                <li><a href="#">短裤</a></li>
                <li><a href="#">休闲裤</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

【事件绑定】在文档加载完后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：bind(type,data,fn);

参数说明：

第一个参数是事件类型；第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象；第三个则是用来绑定的处理函数。

在上面的例子中实现了单击标题显示“内容”，在单击，隐藏“内容”，再次单击有显示“内容”的两个循环动作，为了实现这个功能，需要经过以下几个步骤：

（1）等待DOM装载完毕；

（2）找到“标题”所在的元素，绑定click事件；

（3）找到“内容”元素，如果“内容”元素是显示的，则隐藏；反之亦然。

原理如下：

if("内容"  显示){
    "内容"  隐藏
}else{
    "内容"  显示
}

转载于:https://www.cnblogs.com/yehui-mmd/p/5939940.html