左側のドロップダウン

Question

水平の省略記号ボタンをクリックすると要素を表示したいと思います。私はボタンの左側に、親とインラインでサブ要素を表示したいと思います。それはのようになりますか

画像：ここで

は私のドロップダウンコードであるが、その唯一のダウン、と私は常に左側にそれを表示する方法を知りません。アイコンはフォントのようなアイコンです。誰かが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ブートストラップを使用しています。

Answer 1

私が正しくuはこのような何か...

$(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>