jquery mobileで複数の折りたたみ可能なdivに個々のドロップダウンボタンを追加するにはどうすればよいですか？

私は3つの折りたたみ可能なパネルを持っていると思っています。また、ユーザーが自分のモバイルWebアプリケーションでそれぞれのパネル領域にロードする選択を変更するためのドロップダウンボタンもあります。また、1jquery mobileで複数の折りたたみ可能なdivに個々のドロップダウンボタンを追加するにはどうすればよいですか？

<body> 
    <div data-role="collapsible" class="my-collapsible"> 
    <a href="#" class="my-delete ui-btn ui-icon-delete ui-corner-all">Dropdown 1</a> 
    <h3>Title 1</h3> 
    </div> 

    <div data-role="collapsible" class="my-collapsible"> 
    <a href="#" class="my-delete ui-btn ui-icon-delete ui-corner- all">Dropdown 2</a> 
    <h3>Title 2</h3> 
    </div> 

    <div data-role="collapsible" class="my-collapsible"> 
    <a href="#" class="my-delete ui-btn ui-icon-delete ui-corner-all">Dropdown 3</a> 
    <h3>Title 3</h3> 
    </div> 
</body>

私が望む私が唯一のボタンを追加することができました

、私は私のボタン3をdiv要素に表示され、正しいdivの上のボタンを表示することができるようにいくつかの助けが必要ドロップダウンには、このボタンを変換し、私はから変更されたときに明らかにそれはクラスと競合します

<a href="#" class="my-delete ui-btn ui-icon-delete ui-corner-all">Dropdown 3</a>

へ：

<div id="myDropdown" class="my-delete dropdown-content"> 
    <a href="#">Link 1</a> 
    </div>

http://jsfiddle.net/pwgdk84j/の例がありますが、このソースは表示ソースで見ることができます。http：//fiddle.jshell.net/pwgdk84j/show/light/

出典

2017-05-03 Ricardo G

あなたのコードには小さな間違いがあります。

まず、3つのドロップダウンをすべて表示しますが、絶対位置のため1つしか表示されません。（スタックします）。

変更親クラスへ：

.my-collapsible { 
    position: relative; 
}

が、あなたはすべてのあなたのドロップダウンを切り離しますが、変数の中で唯一の最後を書き、すべての3つのセクションに後でそれを添付してください。

3番目のドロップダウンをリンク1に置き換えますか？

EDIT：

NO JS：

<body> 
    <div data-role="collapsible" class="my-collapsible"> 
    <select> 
    <option>Dropdown 1</option> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <h3>Title 1</h3> 
    </div> 

    <div data-role="collapsible" class="my-collapsible"> 
    <select> 
    <option>Dropdown 2</option> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <h3>Title 2</h3> 
    </div> 

    <div data-role="collapsible" class="my-collapsible"> 
    <select> 
    <option>Dropdown 3</option> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <h3>Title 3</h3> 
    </div> 
</body>

出典

2017-05-03 06:53:06 Gabbax0r

それは今、私は各divの右側に同じボタンの3つを持っていました。位置が少しずれています。しかし、それらはすべて同じボタン3です。私はタイトル1ボタン1、タイトル2ボタン2、タイトル3ボタン3である必要がありました。また、それらをドロップダウンに変換するのに助けが必要です。ダウン[http://jsfiddle.net/ghtcoq1t/](http://jsfiddle。net/ghtcoq1t /） –

@ RicardoGuimaraes jsの正しい1to3ドロップダウンを削除した場合。何を変換すべきか分かりません。ドロップダウンリンク（右）は正確に何をすべきですか？私は私の答えを更新しました。 – Gabbax0r

jsを削除すると、折りたたみ可能なナビゲーションバーを開いたときにのみボタンが表示されます。すべての時間を表示する必要があります。ユーザーのデブロッカーの提案を見てください（http://jsfiddle.net/pfegcv2k/](http://jsfiddle.net/pfegcv2k/））、それはほぼ完璧です、私が今必要とするのは右ボタンを[https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click）などのドロップダウン –

折りたたみ可能なマークアップ内のボタンを追加する場所をここにトリッキーな部分がある - 私はにjQueryのprependToを使用することにより、collapsiblleコンテナにそれを付加しています添付するクリックイベントの参照を保持します。

リンクボタンのように見えるので、「ドロップダウン」の意味を推測するのは難しいことにご注意ください。とにかく、ここに私の提案です：右側に配置され、ボタンやアイコンについては

$(document).on("collapsiblecreate", function(event){ 
 
    var that = $(event.target), idx = $(that).jqmData("index"), title = "Dropdown "+idx; 
 
    var btn = '<a href="#" data-index="'+idx+'" class="ui-btn ui-icon-delete ui-btn-icon-left head-inline">'+title+'</a>'; 
 
    $(btn).prependTo(that).click(function() { 
 
    //do your action here 
 
    console.log($(this).jqmData("index")); 
 
    }); 
 
});

.head-inline { 
 
    position: absolute !important; 
 
    z-index: 2 !important; 
 
    right: 0 !important; 
 
    margin: 0 1em 0 0 !important; 
 
    width: 100px !important; 
 
    border-top-left-radius: 0 !important; 
 
    border-bottom-left-radius: 0 !important; 
 
} 
 

 
.ui-collapsible-heading { 
 
    border-top-right-radius: 0 !important; 
 
    border-bottom-right-radius: 0 !important; 
 
    padding-right: 158px !important; 
 
} 
 

 
.ui-btn:focus { 
 
    -moz-box-shadow: none !important; 
 
    -webkit-box-shadow: none !important; 
 
    box-shadow: none !important; 
 
} 
 

 
.ui-collapsible-content { 
 
    border: 0 !important; 
 
    padding: 0 !important; 
 
    background: transparent !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page"> 
 
    <div data-role="header" data-position="fixed"> 
 
     <h2>Header</h2> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 
     <div data-role="collapsible" data-index="1"> 
 
     <h3>Title 1</h3> 
 
     <div data-role="controlgroup" data-mini="true"> 
 
      <input name="rg-1" id="r-1-1" value="on" checked="checked" type="radio"> 
 
      <label for="r-1-1">One</label> 
 
      <input name="rg-1" id="r-1-2" value="off" type="radio"> 
 
      <label for="r-1-2">Two</label> 
 
      <input name="rg-1" id="r-1-3" value="other" type="radio"> 
 
      <label for="r-1-3">Three</label> 
 
     </div> 
 
     </div> 
 
     <div data-role="collapsible" data-index="2"> 
 
     <h3>Title 2</h3> 
 
     <div data-role="controlgroup" data-mini="true"> 
 
      <input name="rg-2" id="r-2-1" value="on" checked="checked" type="radio"> 
 
      <label for="r-2-1">One</label> 
 
      <input name="rg-2" id="r-2-2" value="off" type="radio"> 
 
      <label for="r-2-2">Two</label> 
 
      <input name="rg-2" id="r-2-3" value="other" type="radio"> 
 
      <label for="r-2-3">Three</label> 
 
     </div> 
 
     </div> 
 
     <div data-role="footer" data-position="fixed"> 
 
     <h2>Footer</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

、固定サイズを設定するのが一般的です。あなたのニーズに応じて調整する必要があります。私の例では100pxに設定されています。また

、あなたは全角collapsibles（data-inset="false"）を必要とする場合、あなたはまた、完全にボタンのマージンを削除することができ、あなたのマークアップの任意のページやページコンテンツを宣言していないので：

.head-inline { 
    margin: 0 !important; 
}

出典

2017-05-03 12:41:34 deblocker

私はいませんでしたあなたの提案を働かせることができます。私はここで試してみましたが（http://jsfiddle.net/20eoLz60/](http://jsfiddle.net/20eoLz60/））、それ以上折り畳まれておらず、重なり合っていません。 –

@RicardoGuimaraes：必要なライブラリを1回だけ含めてください... http://jsfiddle.net/20eoLz60/1/ – deblocker

これはほぼ完璧です。折りたたむときは、以下のテキストだけが必要です。そして、私は右のこのボタンを実際のドロップダウンに変換する必要があります。あなたはそれで私を助けることができますか？ [http://jsfiddle.net/pfegcv2k/](http://jsfiddle.net/pfegcv2k/）私は自分のボタンが必要な場所に正確に必要ですが、そのようなドロップダウンにするには[https://www.w3schools.com /howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click） –

jquery mobileで複数の折りたたみ可能なdivに個々のドロップダウンボタンを追加するにはどうすればよいですか？

答えて

関連する問題