zoukankan      html  css  js  c++  java
  • jjquery模拟select点击事件

    html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <span class="selectType">
      <a title="" href="#" class="ipt" id="selectTypeText">全部</a>
      <span id="selectTypeMenu">
        <a rel="0" title="" href="#">全部</a>
        <a rel="1" title="" href="#">商品</a>
        <a rel="2" title="" href="#">商铺</a>
      </span>
      <input type="hidden" name="" class="ipt" value="" id="selectTypeRel">
      <em class="searchArrow hh abs">下拉选择</em>
    </span>

    css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .sysSelect{width:76px; height:28px; line-height:28px; border:1px solid #CCC; font-size:14px;}
    .sysSelect option{height:28px; line-height:28px;}
    .selectType{position:relative; width:78px; height:30px; line-height:30px; font-size:14px;}
    .selectType .ipt{width:76px; height:28px; line-height:28px; border:1px solid #CCC; display:inline-block; text-decoration:none; color:#000; text-indent:5px; outline:none;}
    .selectType span{position:absolute; width:76px; background-color:#fff; border:1px solid #CCC; border-top-style:dashed; left:0px; top:22px; text-indent:6px; line-height:26px; display:none;}
    .selectType span a{color:#333; display:block; text-decoration:none;}
    .selectType span a:hover{background-color:#f60; color:#fff;}
    .selectType .searchArrow{border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; position:absolute; width:0; height:0; top:6px; right:12px; cursor:pointer; -webkit-transition:-webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; overflow:hidden; text-indent:-2000px;}
    .selectType .searchArrowRote{-moz-transform:rotate(180deg); -moz-transform-origin:50% 30%; -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate(180deg); -o-transform-origin:50% 30%; transform:rotate(180deg);transform-origin:50% 30%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); top:-9px/9;}

    js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $("#selectTypeText").click(function () {
      $(this).next("span").slideDown(200);
      $(".searchArrow").addClass("searchArrowRote");
    });
    $("#selectTypeText").blur(function () {
       $(this).next("span").slideUp(200);
       $(".searchArrow").removeClass("searchArrowRote");
    });
    $("#selectTypeMenu>a").click(function () {
      $("#selectTypeText").text($(this).text());
      $("#selectTypeRel").attr("value", $(this).attr("rel"));
      $(this).parent().slideUp(200);
      $(".searchArrow").removeClass("searchArrowRote");
      return false;
    });
  • 相关阅读:
    [转]Spring.NET企业架构实践之 NHibernate + Spring.NET + WCF + Windows服务 + Silverlight 中小企业应用架构完整Demo
    [转]用EA 建模设计Blog全过程
    下载页面
    Expression Studio 4 ultimate x86 下载含序列号
    ACS.NET缓存技术
    Case
    再谈C#中的委托,匿名方法和Lambda表达式
    代理服务器的设置
    软件架构师之职责范围和高级软件工程师的职责范围
    WPF博客
  • 原文地址:https://www.cnblogs.com/fdxxiaobai/p/7499502.html
Copyright © 2011-2022 走看看