左侧下拉

Question

我想在单击水平省略号按钮时显示元素。我想在按钮的左侧显示与父级内联的子元素。

图像应如何显示：

这是我的下拉代码，但它只是向下，我不知道如何在左边显示它。图标是fontawesome图标，如果有人可以发布一个jsfiddle它会很棒。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i>
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li class="dropleft-items"><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
      </ul>
    </div>

我正在使用CSS Bootstrap。

Answer 1

如果我正确理解你想要这样的东西......

$(document).ready(function(){
  var menuWrapper = $('.menu'),
      button = menuWrapper.find('button'),
      menu = menuWrapper.find('ul.toggle-left');
  $(button).on('click', function(){
    $(this).prev(menu).toggle();
  });
});

.menu{
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 5px 5px;
}

ul.toggle-left{
  float: left;
  list-style-type: none;
  margin-bottom: 0;
  padding-left: 0;
  display: none;
}

ul.toggle-left>li{
  float: left;
  padding: 5px 10px;
}
.btn-toggle{
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="menu" class="clearfix">
  <ul class="toggle-left clearfix">
        <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li>
        <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li>
        <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li>
      </ul>
  <button class="btn" type="button" class="btn-toggle"><i class="fa fa-ellipsis-h" aria-hidden="false"></i></button>
</div>
  <div class="menu" class="clearfix">
  <ul class="toggle-left clearfix">
        <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li>
        <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li>
        <li class="btn"><a href="#"><i class="fa fa-times"></i></a></li>
      </ul>
  <button class="btn" type="button" class="btn-toggle"><i class="fa fa-ellipsis-h" aria-hidden="false"></i></button>
</div>