JQuery 드롭다운

1 개요[ | ]

jQuery 드롭다운
<style>
.caret {
  display: inline-block;
  border: 4px solid transparent;
  border-top: 4px dashed;
}
.dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu {
  list-style-type: none;
  position: absolute;
  z-index: 1000;
  top: 100%; left: 0;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  display: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.open>.dropdown-menu { display: block; }
.dropdown-menu>li>a {
  display: block;
  color: black;
  padding: 3px 20px;
  line-height: 1.5;
  text-decoration: none;
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover { background: #f5f5f5; }
</style>

<span class="dropdown">
  <button class="dropdown-toggle">
    드롭다운A <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">메뉴 A1</a></li>
    <li><a href="#">메뉴 A2</a></li>
  </ul>
</span>

<span class="dropdown">
  <button class="dropdown-toggle">
    드롭다운B <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">메뉴 B1</a></li>
    <li><a href="#">메뉴 B2</a></li>
    <li><a href="#">메뉴 B3</a></li>
  </ul>
</span>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $(".dropdown-toggle").click(function(event) {
    event.stopPropagation();
    var parent = $(this).parent(".dropdown");
    $('.dropdown').not(parent).removeClass("open");
    parent.toggleClass("open");
  });
  $(window).click(function() {
    $(".dropdown").removeClass("open");
  });
</script>
2 같이 보기[ | ]
