HTMLボタンをドロップダウンリストにラップする

HTMLボタンをラップしてドロップダウンリストに表示する方法はありますか？HTMLボタンをドロップダウンリストにラップする

私は、次の2つのボタンがあります。

をそして、私は彼らがドロップダウンリストからアクセスになりたい、これはHTMLで可能ですか？

2017-08-11 Kris22

ありません。 JavaScript、HTML、およびCSSを使用して独自のドロップダウンを作成する必要があります。 –

でこのように追加することができ、私はあなたがブートストラップを使用していると仮定します。普通のHTMLを使用して<select>要素でそれを行うことはできません。ブートストラップ機能の残りの部分を使用している場合は、ブートストラップのドロップダウンを使用して、以下のようなことをすることができます。の要素がliであるためにevent.preventDefault()を実行する必要がある場合があります。また、必要に応じてCSSをさらに動作させる必要があります。

途中でモーダルをトリガーするのに実際には<button>は必要ありません。例えば、このようなものに以下のドロップダウンの最後の項目を変更しても動作します：純粋なHTMLで

<li><a href="#" data-toggle="modal" data-target="#myModal">JavaScript</a></li>

.dropdown li span { 
 
    display: inline-block; 
 
    min-width: 100px; 
 
}

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 

 
<! -- Bootstrap Dropdown --> 
 
<div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Try this </span> 
 
     <button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#authorize'>Show Demo Card Details</button> 
 
     </a> 
 

 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span href="#">Try another?</span> 
 
     <button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#myModal'>Show Demo Card Details</button> 
 
     </a> 
 
    </li> 
 
    <li><a href="#" class="bg-info" data-toggle="modal" data-target="#myModal">JavaScript</a></li> 
 
    </ul> 
 
</div> 
 

 

 
<!-- Example modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
</body>

出典

2017-08-11 13:14:23

これは私がやったことですが、これは私がとにかく。助けてくれてありがとう。 – Kris22

-3

あなたは、単に自分のHTMLマークアップに基づいて

<option data-toggle='modal' data- 
target='#authorize'>Show Demo #authorize Details</option> 
<option data-toggle='modal' 
data-target='#test'>Show Demo #test Details</option>

出典

2017-08-11 12:49:57

'select'要素全体のコードを表示すると良いでしょう...そうでなければ、これは2行のテキストを表示します – ochi

HTMLボタンをドロップダウンリストにラップする

答えて

関連する問題