【jQuery】アコーディオンメニュー01

最初のアイテムのみオープン状態

by tea4two

HTML

<ul id="accordion">
  <li>
  Item 1
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a></li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li>
  Item 2
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a></li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li>
  Item 3
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a></li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
</ul>

CSS

#accordion {
  width:200px;
}

#accordion li {
  cursor:pointer;
  font-weight:bold;
  color:#015287;
  border:1px solid #b2b2b2;
  margin-bottom:2px;
  list-style:none;
  border-radius:4px;
  padding: 4px 8px;
}

#accordion li.active {
  color:orange
}

#accordion li ul {
  padding:0;
  margin:10px 0 0 0;
}

#accordion li li {
  font-weight:normal;
  border:0;
}

JavaScript

$(function(){

    // Hide all but first ul li
    $('ul#accordion > li ul').click(function(e){
        e.stopPropagation();
    })
    .filter(':not(:first)')
    .hide();
    
    $('ul#accordion > li').click(function(){
        // Set up a variable to detect if the ul is visible
        var selfClick = $(this).find('ul:first').is(':visible');
    
        // If it's not the one we clicked on, hide it
        if (!selfClick) {
            $(this)
            .parent()
            .find('> li ul:visible')
            .slideToggle();
        }
    
        // Toggle the item that was clicked on (hide/show)
        $(this)
        .find('ul:first')
        .slideToggle();
    });
    
});