html关于下拉按钮的实现（静态网页）1

最新推荐文章于 2024-08-24 09:00:00 发布

alsdiuhfeircn

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量4.2k

点赞数

分类专栏： html+css 文章标签：下拉按钮的js实现

本文链接：https://blog.csdn.net/alsdiuhfeircn/article/details/90699453

版权

html+css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

实现步骤

1，.css代码如下：（xx.css）

.clear{overflow: hidden;}
.wrap-nav{margin-top:10px;width: 100%;z-index: 9;}
/*position: fixed;top: 0;left: 0;绝对定位top: 0;left: 0;*//*z-index: 99数值小的被遮挡*/
.wrap-nav .nav-tap{display: block;width: 50%;line-height: 50px;position: relative;
	z-index: 12;}
/*background: url(../images/sanjiaoon.png) right center no-repeat;水平向右垂直居中*/

.nav-xl{position: fixed;width: 100%;background-color: #ffffff;border-top: 1px solid grey;
	transform:translateY(-400px);padding-top: 0px;}
/*transform:translateY(-400px);定义转换Y轴看不到*/
.nav-xl span{display: block;border-bottom: #e5e5e5 solid 1px;font-size: 15px;line-height: 41px;padding-left: 60px;}
.nav-xl.on{transform:translateY(0px);z-index: 90}

2，link标签引用

3，<div>框架

    <div class="wrap-nav clear">
         <div class="nav-tap clear">
          <img src="../img1/yi0_03.jpg">
          <span style="display:inline-block"></span>
       </div>
           <div class="nav-xl amn4">
               <span _id1="1">酒吧</span>
               <span _id1="2">餐馆</span>
               <span _id1="3">体育馆</span>
               <span _id1="4">茶吧</span>
               <span _id1="5">spa</span>
          </div>
    </div>

4，脚本实现

<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
	  $(".wrap-nav .nav-tap").click(function(){		//this是指当前单击对象
		$(this).children("span").toggleClass("on"); 							
		$(".wrap-nav .nav-xl").toggleClass("on"); 
	  })
	  $(".wrap-nav .nav-xl span").click(function(){//$(".wrap-nav .nav-xl span")在.nav-xl是 
                                          //指全部的span标签的都应用click监控事件
		$(this).parent().removeClass("on"); 
        // window.location.href="file:///E:/software_ex/html/qiantuan_ex/qianduan_wenhua/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/shouye.html";
		  var tContent = $(this).text(); 
    // var tContent_span=null;
    // tContent_span+='<span>'+tContent+'</span>' 
	    $(".wrap-nav .nav-tap span").text(tContent);
	    }) 

    </script>

5，效果显示

单击前的下拉图：单击后的对象：