首页 > 代码库 > jquery逻辑的简单例子

jquery逻辑的简单例子

2024-09-30 17:36:39   218人阅读

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/a1.css">
    <script src="./js/jquery.min.js"></script>
    <style>
    .title{
    width: 300px;
    height: 40px;
    line-height: 40px;
    background: #333;
    text-indent: 2em;
    color: #fff;
    margin-top: 2px;
}
.content{
    width: 298px;
    border: 1px solid #333;
    display: none;
}

.active{
    background: #999;
}
    </style>
</head>
<body>
    <div class="title">aaaaaa</div>
    <div class="content">
        <p>aaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaa</p>
    </div>
    <div class="title">bbbbbb</div>
    <div class="content">
        <p>bbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbb</p>
    </div>
    <div class="title">cccccc</div>
    <div class="content">
        <p>ccccccccccccccc</p>
        <p>ccccccccccccccc</p>
        <p>ccccccccccccccc</p>
        <p>ccccccccccccccc</p>
        <p>ccccccccccccccc</p>
        <p>ccccccccccccccc</p>
    </div>
</body>
<script src="./js/a1.js">
//$(".title") 选择对象
//click() 触发条件
//function(){} 操作函数

$(".title").click(function(){
    $(this).next().slideToggle(1000); //设置下拉需要的时间
    $(this).toggleClass("active"); //<div class="title">aaaaaa</div>,增加一个class title,<div class="title active"></div>
});
</script>
</html>

 

jquery逻辑的简单例子


联系
我们