插件封装2(boot风格)

最新推荐文章于 2025-01-09 22:00:20 发布

spfLinux

最新推荐文章于 2025-01-09 22:00:20 发布

阅读量263

点赞数

分类专栏： boot jQuery 文章标签： boot 插件封装

jQuery 同时被 2 个专栏收录

21 篇文章

订阅专栏

boot

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的手风琴效果及下拉菜单的制作方法，通过简单的代码实现了交互式的组件，适用于网页设计中常见的需求。

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

html1：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>...</title>
  <link rel="stylesheet" href="boot_ui/style.css">
 </head>
 <body>
  <h1>下拉菜单</h1>
  <div class="dropdown">
    <a data-trigger="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu fade">
	    <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
	    <li><hr></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

	<script src="boot_ui/jquery-3.2.1.js"></script>
  <script src="boot_ui/style.js"></script>
 </body>
</html>

html2：

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="boot_ui/style.css">
 </head>
 <body>
	<h1>使用“高度动画”实现“手风琴”组件</h1>
	<div class="accordion">
		<div class="title" data-toggle="collapse">《西游记》简介</div>
		<div class="content fade in">一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi?	</div>
		<div class="title" data-toggle="collapse">《水浒传》简介</div>
		<div class="content fade">105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
		<div class="title" data-toggle="collapse">《红楼梦》简介</div>
		<div class="content fade">一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
	</div>

	<script src="boot_ui/jquery-3.2.1.js"></script>
  <script src="boot_ui/style.js"></script>
 </body>
</html>

style.css

/* ---------------------tabs------------------------ */
.tabs{ list-style:none; padding:0;}
.tabs a{
  text-decoration:none;
	color:#000;
	padding:6px 12px;
	display:inline-block;
  width:96px;
  text-align:center;
}
.tabs>li{
  float:left;
  border-bottom:1px solid #000;
}
.tabs>.active{
  border:1px solid #000;
  border-bottom:0;
}
.tabs+.container{
	position: relative;
}
.tabs+.container>div{
	width: 300px;
	height: 100px;
	padding:30px;
  background:#fff;
  border:1px solid #000;
  border-top:0;
	position: absolute;
	top: 34px;
	left: 0;
}
.tabs+.container>.active{
  z-index:10;
}

/* ---------------------dropdown---------------------- */
.dropdown{width:64px; height:20px;}
.dropdown a{
  text-decoration:none; 
  color:#000;
  display:inline-block;
}
.dropdown>a{ 
  border:1px solid #000; padding:6px 12px;
}
.dropdown-menu{
  width:200px;
  list-style:none; margin:0; padding:0;
  border:1px solid #aaa;
  box-shadow:5px 5px 6px #000;
}
.dropdown-menu a{padding:6px 20px; width:160px}
.dropdown-menu li:hover{background:#ddd}
.dropdown>.fade{
  height:0;
  opacity:0;
  overflow:hidden;
  transition:all .5s linear;
}
.dropdown>.in{
  height:152px;
  opacity:1;
}

/* -----------------------accordion------------------------- */
.accordion{width:80%; margin:0 auto;}
.accordion>.title{
  background:#eee; border:1px soild #aaa;
  padding:6px; font-size:1.5em; 
  font-weight:bold; cursor:pointer;
}
.accordion>.content{
  border-left:1px solid #eee;
  border-right:1px solid #eee;
}
.accordion>:last-child{
  border-bottom:1px solid #eee;
}
.accordion>.fade{
  height:0;
  opacity:0;
  overflow:hidden;
  transition:all .5s linear;
}
.accordion>.in{
  height:84px;
  opacity:1;
}

style.js

/*
  boot风格插件封装
 */
if(typeof jQuery !== "function"){
  throw new Error("diy_ui依赖于jQuery,必须先引入jquery.js");
}else{
	$(()=>{  //DOM加载后自动执行
		$(".tabs:has([data-toggle=tab])")
	      .on("click","[data-toggle=tab]",e=>{
	      e.preventDefault();
	      var $tar=$(e.target);
	      if(!$tar.parent().is(".active")){
	        $tar.parent().addClass("active")
	          .siblings().removeClass("active");
	        var id=$tar.attr("href");
	        $(id).addClass("active")
	          .siblings().removeClass("active");
	      }
	    })
	})

	$(()=>{
		$(".dropdown:has([data-trigger=dropdown])")  //boot中data-*表示行为
        .hover(function(){
            $(this)
              .children(".dropdown-menu")
              .toggleClass("in")
        })
	})

	$(()=>{
		$(".accordion:has([data-toggle=collapse])").on("click",".title",e=>
	      $(e.target).next(".content").toggleClass("in")
	        .siblings(".content").removeClass("in")
	    );
	})
}