惠娴小屋

下拉菜单的实质是:显示隐藏层、样式切换、传值<div class="main-classes&......
当前位置 : 首页 >> 前端 >> 正文

Div 实现下拉菜单

2015年11月20日 15:20:11   归类:前端   评论(0)

下拉菜单的实质是:显示隐藏层、样式切换、传值

<div class="main-classes">
  <label class="classes-name">指标选择:</label>
  <div class="select-on">
    <label class="select-txtOn">欺诈损卡数</label>
    <div class="arrowDown"></div>
  </div>
  <div class="select-long">
    <ul>
      <li>欺诈损卡数2</li>
      <li>欺诈损卡数</li>
      <li>欺诈损卡数3</li>
    </ul>
  </div>
</div>
.main-classes{ margin-top:19px; position:relative}
.classes-name{font-size:14px; color:#344c67; font-weight:700; position:relative; z-index:1}

.select-on {border:1px solid #d3dee8; width:100%; border-radius:2px; height:34px; line-height:34px; font-size:14px; color:#344c67; background-color:#fff; cursor:pointer; margin-top:9px; text-indent:10px}
.select-long {position:absolute; z-index:5; border:1px solid #d3dee8; background-color:#fff; font-size:12px; font-weight:400; width:100%}
.select-long ul {padding:5px 0}
.select-long li {color:#344c67; clear:both; text-indent:10px; line-height:23px; cursor:pointer; margin-right:50px}
.select-long li:hover {color:#3ab1ea; font-weight:700}
.select-txtOn {float:left; cursor:pointer}
.arrowDown, .arrowUp {width:16px; height:34px; float:right; margin-right:10px}
.arrowDown {向下的箭头图片}
.arrowUp {向上的箭头图片}
$(function(){
$(".select-long").hide();
var arrowW = $(".arrowDown");
var selectLi = $(".select-long li");
selectLi.click(function(){
  $(".select-long").hide();
arrowW.addClass("arrowDown").removeClass("arrowUp");
$(this).parent().parent().prev().find(".select-txtOn").text($(this).text());
});
$(".select-on").click(function(){
  $(this).next(".select-long").toggle();
arrowW.toggleClass("arrowUp");
});
})


——Hilder独家出品,转载请标明出处,不然黑你家网站。

Tags:

参与评论

访客先生/女士,非常欢迎您参与评论   

昵称*

E-mail*

网站