Jquery移动面板按钮最多只能工作300px

Question

我构建了一个响应式大小的面板，如下所示：

<div data-role="panel" data-position="right" data-display="overlay" data-theme="a"
id="add-form" style="width:50%; max-width:500px;" data-position-fixed="true">

出于某种原因，该面板似乎在 300px 标记处停止工作。例如，面板将根据视口宽度调整大小，但宽度超过 300px 时无法单击任何内容。当面板宽度超过 300 像素时，部分按钮可单击，部分按钮不可点击。我尝试将 ！重要添加到所有内容中，这也无济于事。我使用的是jQuery mobile 1.4.3（对于桌面网站，我只是喜欢面板，表单和按钮的外观，而不是桌面jQuery的）。是的，我已经将jQuery及其CSS称为head标签中的最后一项，否则该面板根本无法工作

Answer 1

我在这里在黑暗中拍摄，因为我看不到您的其余标记。

我模仿了一个小提琴，http://jsfiddle.net/a9f22n70/1/我认为你的意思。在加载时，我看到一堆类添加到面板元素（通过jQuery mobile），这些类在桌面上给我带来了布局问题。我在加载时删除了所有类并重新添加了"ui-panel"类。这为我清理了一切。

我用来测试的标记是：

<div data-role="panel" data-position="left" data-display="overlay" data-theme="a"id="add-form" style="width:50%; max-width:500px;background:red;" data-position-fixed="true">
    <a href="index.html" data-role="button">Link button</a>
</div>

jQuery（死简单）如下：

$(document).ready(function(){
    $("#add-form").attr("class","").addClass("ui-panel");
})

同样，我假设您只想定位 #add 形式元素。

正如他们所说，假设是所有人之母...... 所以希望我一针见血！

更新

在检查了小提琴中的代码后，问题（对我来说）是面板上存在类"ui-panel-dismiss"。删除此类（通过我的检查器工具进行测试）纠正了此问题。

这有点黑客，但是您可以在页面加载后使用removeClass();函数在页面加载后使用jQuery从面板中删除此类。

编辑

这是一个解决问题的工作小提琴：http://jsfiddle.net/smoewxd4/3/

终审判

决

您在评论中提出的 CSS 解决方案有效，但会导致所有面板设置为 50% 宽。我建议使用此CSS选择器来使其特定于 #add-form元素，并消除使用！important：

#add-form.ui-panel.ui-panel-dismiss{ width:50%; }