jQuery點擊顯示隱藏帶箭頭

html

<dl class="list" id="menu">
						<dd>
							<a href="javascript:;" class="submenu">抗震支架零部件<i></i></a>
							<ul class="drop">
								<li><a href="" title="">主材</a></li>
								<li><a href="" title="">主材</a></li>
								<li><a href="" title="">主材</a></li>
								<li><a href="" title="">主材</a></li>
							</ul>
						</dd>
						<dd>
							<a href="javascript:;" class="submenu">抗震支架圖片<i></i></a>
							<ul class="drop">
								<li><a href="" title="">主材</a></li>
								<li><a href="" title="">主材</a></li>
								<li><a href="" title="">主材</a></li>
								<li><a href="" title="">主材</a></li>
							</ul>
						</dd>
					</dl>

CSS

.submenu{display:block;color:#333; padding: 0 20px;height:47px; line-height:47px; font-size: 16px; background-color: #e8ecf7;overflow: hidden;    text-align: left;margin:10px;}
.submenu:hover,.submenu.current{background:#ff6f2c;  color:#fff; }
.submenu i{display: inline-block;width: 14px;height: 14px;background: url(../images/right1.png);background-size: 100%;float: right;margin-top:17px ;}/*默認箭頭*/
.submenu i.cur{background: url(../images/bottom.png);background-size: 100%;}/*選中時的箭頭*/

.side-menu .drop { width:100%; padding:0 0;margin:0 auto;   background-color: #fff;  display:none; }
.side-menu .drop li { width:100%; height:45px; line-height:45px;     background: #f2f5fd;}
.side-menu .drop a { display:block;margin:6px 30px;   color:#666666;  white-space:nowrap;  
  	text-overflow: ellipsis; overflow: hidden; font-size: 14px;background: #f2f5fd;     text-align: left;}
.side-menu .drop a:hover { color:#000;  }

jQuery

$("#menu dd").click(function(){
    var $parent = $(this).children('a');
    if($parent.hasClass('current')){
      $parent.next().slideUp();
	  $parent.removeClass('current');
      $parent.children('i').removeClass("cur");
	  
    } else {
      $parent.next().slideDown();
	  $parent.addClass('current');
	  $parent.children('i').addClass('cur');
	  $(this).siblings().children('a').removeClass('current');
	  $(this).siblings().children('a').children('i').removeClass('cur');
	  $(this).siblings().children('ul').slideUp();
    }
  });

效果示例圖
點擊展開
點擊展開當前收起其他

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章