JQuery 드롭다운 오른쪽 정렬

1 개요[ | ]

jQuery 드롭다운 오른쪽 정렬
jQuery 오른쪽 정렬 드롭다운
<style>
.caret {
  display: inline-block;
  border: 4px solid transparent;
  border-top: 4px dashed;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle { cursor: pointer; }
.dropdown-menu {
  position: absolute;
  display: none;
  list-style-type: none;
  z-index: 1000;
  right:0;
  min-width: 120px;
  padding: 5px 0;
  margin: 2px 0;
  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 {
  color: black;
  display: block;
  padding: 3px 20px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover { background: #f5f5f5; }
</style>

<div class="dropdown">
  <button class="dropdown-toggle">
    드롭다운L1 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" style="left:0;">
    <li><a href="#">메뉴 L1-1</a></li>
    <li><a href="#">메뉴 L2-2</a></li>
  </ul>
</div>


<div style="float:right">
  <div class="dropdown">
    <button class="dropdown-toggle">
      드롭다운R1 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">메뉴 R1-1</a></li>
      <li><a href="#">메뉴 R1-2</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="dropdown-toggle">
      드롭다운R2 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">메뉴 R2-1</a></li>
      <li><a href="#">메뉴 R2-2</a></li>
      <li><a href="#">메뉴 R2-3</a></li>
    </ul>
  </div>
</div>

<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 같이 보기[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}