Javascript 如何将jquery mobile的各个下拉按钮添加到多个可折叠div中？_Javascript_Html_Css_Dom_Jquery Mobile

Javascript 如何将jquery mobile的各个下拉按钮添加到多个可折叠div中？

javascript html css dom jquery-mobile

Javascript 如何将jquery mobile的各个下拉按钮添加到多个可折叠div中？,javascript,html,css,dom,jquery-mobile,Javascript,Html,Css,Dom,Jquery Mobile,我希望有3个可折叠面板，还有一个下拉按钮，用户可以更改选择，将加载在我的移动web应用程序的相应面板区域我只能添加一个按钮，我需要一些帮助才能在正确的div上显示按钮，我的按钮3显示在div 1上 <body> <div data-role="collapsible" class="my-collapsible"> <a href="#" class="my-delete ui-btn ui-icon-delete ui-corner-all">

我希望有3个可折叠面板，还有一个下拉按钮，用户可以更改选择，将加载在我的移动web应用程序的相应面板区域

我只能添加一个按钮，我需要一些帮助才能在正确的div上显示按钮，我的按钮3显示在div 1上

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


标题1
标题2
标题3

此外，我还想将此按钮转换为下拉列表，显然，当我从以下位置更改时，它与类冲突：

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

致：

我有一个例子，这个源可以在查看源中看到：http://fiddle.jshell.net/pwgdk84j/show/light/您的代码中有一些小错误

首先，显示所有3个下拉列表，但由于位置的原因，只有一个下拉列表可见：绝对。（它们堆叠在一起）

将父类更改为：

.my-collapsible {
  position: relative;
}

然后分离所有下拉列表，但只在变量中写入最后一个on，然后将其附加到所有3个部分

是否只替换链接1的第三个下拉列表

编辑：

无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>


下拉列表1
1.
2.
标题1
下拉列表2
1.
2.
标题2
下拉列表3
1.
2.
标题3

这里棘手的部分是在可折叠标记中添加按钮的位置-我正在使用jQuery

prependTo

为要附加的单击事件保留一个引用，将其预先添加到可折叠容器中

请注意，很难猜测“下拉”下的含义，因为在您的示例中，它看起来就像一个链接按钮。无论如何，我的建议如下：

$（文档）.on（“可折叠创建”，函数（事件）{
var that=$（event.target），idx=$（that.jqmData（“index”），title=“Dropdown”+idx；
var btn=“”；
$（btn）.prependTo（that）.单击（函数（）{
//你在这里做什么
log（$（this.jqmData（“index”））；
});
});
.headinline{
位置：绝对！重要；
z指数：2！重要；
右：0！重要；
边距：0 1米0！重要；
宽度：100px！重要；
边框左上半径：0！重要；
边框左下半径：0！重要；
}
.ui可折叠标题{
边框右上角半径：0！重要；
边框右下半径：0！重要；
右边填充：158px！重要；
}
.ui btn：焦点{
-莫兹盒影：无！重要；
-网络工具包盒阴影：无！重要；
盒影：无！重要；
}
.ui可折叠内容{
边界：0！重要；
填充：0！重要；
背景：透明！重要；
}

标题
标题1
一个
两个
三
标题2
一个
两个
三
页脚
这很有帮助，现在我在每个div的右侧都有3个相同的按钮。有点错位。但所有这些都是相同的按钮3。我需要成为标题1按钮1、标题2按钮2和标题3按钮3。另外，我需要帮助将它们转换为下拉列表，如果你删除你的js，我希望所有3个都是下拉列表@RicardoGuimaraes，这是正确的1to3下拉列表。我不明白应该转换什么。下拉链接（右边）应该是什么？我更新了我的答案。如果我删除js，则只有当我打开可折叠导航栏时，按钮才会出现。它必须一直显示出来。请看一看用户deblocker的建议，它几乎是完美的，我现在需要的是将正确的按钮转换为下拉列表，例如我无法将您的建议付诸实施。我在这里尝试过，但它不再崩溃和叠加。@RicardoGuimaraes:您应该只包含一次所需的库。。。这几乎是完美的。折叠时，我只需要下面的文本。我需要把右边的这个按钮转换成一个真正的下拉菜单。你能帮我吗？我需要我的按钮到底在哪里，但要像那样下拉
    <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>