ホーム > タグ > アコーディオン

アコーディオン

jQueryでアコーディオンメニューをつくる【jQuery】

目的:jQueryを使ってアコーディオンメニューをつくる。
TRIPLEXXX:jQueryでアコーディオンメニューを作成する“を参考にさせていただきました。
下記にサンプルをかきかきしてみよう。
もちろんだが、jQueryをつかっているのでライブラリを入手して読み込みます。
今回は、jquery-1.4.3.min.jsを使用しました。

xhtml

<ul class="acc">
 <li><a href="1">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

css

ul.acc a, ul.acc li ul a {
 text-decoration: none;
 color: #EFEFEF;
}
ul.acc a:hover, ul.acc li ul a:hover {
 text-decoration: underline;
}
ul.acc ,ul.acc li ul {
 list-style: none;
}
ul.acc {
 width: 150px;
 color: #EFEFEF;
 background-color: #333333;
}
ul.acc a{
 padding: 0 10px;
 display: block;
 height: 30px;
 line-height: 30px;
}
ul.acc li {
 border-top: 1px dotted #555555;
}
ul.acc li ul {
 margin: 0 0 0 15px;
 background-color: #666666;
}
ul.acc li ul a {
 padding: 5px;
 display: block;
 height: 20px;
 line-height: 20px;
}
ul.acc li ul li{
 border-top: 1px dotted #888888;
}

1.シンプルなアコーディオンメニュー

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    $j(this).next().toggle().parent().siblings()
    .children("ul:visible").hide();
    return false;
   });
  });
 });
});

2.メニューの開閉がスムーズなアコーディオン

// 変更前
$j(this).next().toggle().parent().siblings()
.children("ul:visible").hide();
// 変更後
var params = {height:"toggle"};
$j(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);

よって

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    //$j(this).next().toggle().parent().siblings()
    //.children("ul:visible").hide();
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

3.メニューの開閉がスムーズなアコーディオン(透明度もアコーディオン♪)

//変更前
var params = {height:"toggle"};
//変更後
var params = {height:"toggle", opacity:"toggle"};
var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle", opacity:"toggle"};
    $j(this).next().animate(params).parent().siblings()
    .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

よし!
と思いきや、これではmenu 1-1など、リンクが無効になってしまっている。
理由はreturn false;でリンク先に飛ばないよう設定してしまっているため。
回避するには…return false;を消すわけにはいかないので、、、
アコーディオンにしたいaタグにクラス指定をする!
さぁやってみよう…

<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

合わせてスクリプトの指定も変更

//変更前
$j("li > a", this).each(function(index){
//変更後
$j("a.open", this).each(function(index){

無事成功。
これでリンクが指定したURLに飛びます。

以下自分用まとめ

【今回使用するセット】

xhtml

<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

css

ul.acc a, ul.acc li ul a {
 text-decoration: none;
 color: #EFEFEF;
}
ul.acc a:hover, ul.acc li ul a:hover {
 text-decoration: underline;
}
ul.acc ,ul.acc li ul {
 list-style: none;
}
ul.acc {
 width: 150px;
 color: #EFEFEF;
 background-color: #333333;
}
ul.acc a{
 padding: 0 10px;
 display: block;
 height: 30px;
 line-height: 30px;
}
ul.acc li {
 border-top: 1px dotted #555555;
}
ul.acc li ul {
 margin: 0 0 0 15px;
 background-color: #666666;
}
ul.acc li ul a {
 padding: 5px;
 display: block;
 height: 20px;
 line-height: 20px;
}
ul.acc li ul li{
 border-top: 1px dotted #888888;
}

js

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("a.open", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

Home > タグ > アコーディオン

want

Return to page top