[jquery] 不錯得 手風琴 選單...

2009年7月30日星期四

[jquery] 不錯得手風琴選單...

他有加cookie 的plugin ...
裡面可以學到一點東西...


<style>
dl, dt, dd{ margin:0; padding:0;} 

dl { 

 width: 200px;

}

dt {

 padding: 5px 20px;

 cursor: pointer;

 position: relative;

 margin:1px;

    font-weight:bold;

    

}

.leftIco{background: #51a635 url(left.gif) 6px 7px  no-repeat;}

.bottomIco{background: #51a635 url(bottom.gif) 6px 7px  no-repeat;}

dd {

 display:none;

}

dd a{

  display:block;

  color:#006699;

  background-color:#EFEFEF;

  padding-left:20px;

  font-weight:bold;

  text-decoration:none;

}


dd a:hover{

  color: #000000;

  text-decoration:underline;

}
</style>
<script src="http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://www.cssrain.cn/demo/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 //點擊觸發
 $("#sfqclick dt").click(function(){
  $(this).toggleClass("bottomIco")
      .next().slideToggle(300)
      .siblings("dd").slideUp("slow");
  $(this).siblings("dt").removeClass("bottomIco");
  
  var index = $("#sfqclick dt").index(this);
  $.cookie('the_cookie', index ); // 設置cookie
 });
 
 var cookievalue= $.cookie('the_cookie');
 if( cookievalue){
  $("#sfqclick dt").eq(cookievalue).click();
 }


 //鼠標觸發&&點擊
 var times = null;
 $("#sfqmouse dt").mouseover(function(){
  var $self = $(this);
  times = setTimeout(function(){
   $self.addClass("bottomIco") 
   //注意這裡的this! ,window.setTimeout(function(){} this 代表window，所以我們需要在外面先把 $(this)用變量緩存起來，在使用setTimeout(),setInterval()時，要特別注意this。以免出錯。
     .next().slideDown(500)
     .siblings("dd").slideUp("slow");
      $self.siblings().removeClass("bottomIco");
  },500);
 }).mouseout(function(){
  if(times){
   clearTimeout(times);
  }
 }).click(function(){
  $(this).toggleClass("bottomIco")
      .next().slideToggle(300)
      .siblings("dd").slideUp("slow");
  $(this).siblings("dt").removeClass("bottomIco");
 });
});
</script>
</head>
<body>

<h1>7，最終效果 </h1>

<!--demo1 :onclick -->
<div style="float:left" >

 <p><strong>onclick</strong></p>
 <dl id="sfqclick">
 <dt class="leftIco">MainLink-1</dt>
 <dd>
   <a href="#">SubLink-1</a>

        <a href="#">SubLink-2</a>
        <a href="#">SubLink-3</a> 
 </dd>
 <dt class="leftIco">MainLink-2</dt>
 <dd>
   <a href="#">SubLink-1</a>
        <a href="#">SubLink-2</a>

        <a href="#">SubLink-3</a> 
 </dd>
 <dt class="leftIco">MainLink-3</dt>
 <dd>
        <a href="#">SubLink-1</a>
        <a href="#">SubLink-2</a>
        <a href="#">SubLink-3</a>   
   </dd>

 </dl>

</div>


<!-- demo2 :-->
<div style="float:left; margin-left:20px;">

 <p><strong>mouseover&&onclick </strong></p>
 <dl id="sfqmouse">
 <dt class="leftIco">MainLink-1</dt>

 <dd>
   <a href="#">SubLink-1</a>
        <a href="#">SubLink-2</a>
        <a href="#">SubLink-3</a> 
 </dd>
 <dt class="leftIco">MainLink-2</dt>
 <dd>

   <a href="#">SubLink-1</a>
        <a href="#">SubLink-2</a>
        <a href="#">SubLink-3</a> 
 </dd>
 <dt class="leftIco">MainLink-3</dt>
 <dd>
        <a href="#">SubLink-1</a>

        <a href="#">SubLink-2</a>
        <a href="#">SubLink-3</a>   
   </dd>
 </dl>
</div>