Jquery 移动面板按钮最多只能工作 300 像素
Jquery mobile panel buttons only working up to 300px
我构建了一个响应大小的面板，如下所示：
<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 标记处停止工作。与此一样，面板将根据视口宽度调整大小，但超过 300 像素宽度时无法点击。当面板宽度超过 300px 时，部分按钮可点击，部分按钮不可点击。我已经尝试添加 !important 到所有内容，它也无济于事。我使用的是 jQuery 移动版 1.4.3（对于桌面版网站，我只是喜欢面板、表单和按钮的外观比桌面版 jQuery 更好）。是的，我调用了 jQuery 及其 CSS 作为 head 标签中的最后内容，否则面板根本无法工作
我在黑暗中拍照，因为我看不到您标记的其余部分。
我在 http://jsfiddle.net/a9f22n70/1/ 处模拟了一个 Fiddle 我认为你的意思。在加载时，我看到面板元素（通过 jQuery 移动设备）添加了一堆 classes，这导致我在桌面上出现布局问题。我在加载时删除了所有 classes 并重新添加了 "ui-panel" class。这为我清理了一切。
我用来测试的标记是：
<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-form 元素。
正如他们所说，假设是万物之母......所以希望我一语中的！
更新
检查您 fiddle 中的代码后，（对我而言）问题是面板本身存在 class "ui-panel-dismiss"。删除此 class（通过我用于测试的检查器工具）纠正了此问题。
这有点 hack，但您可以在页面加载后使用 jQuery 从面板中删除此 class，使用 removeClass(); 函数。
编辑
这是一个有效的 fiddle 解决问题：http://jsfiddle.net/smoewxd4/3/
最终判决
您在评论中提出的 CSS 解决方案有效，但会导致所有面板都设置为 50% 宽。我建议使用这个 CSS 选择器，而不是使其特定于 #add-form 元素，并消除使用 !important:
#add-form.ui-panel.ui-panel-dismiss{
width:50%;
}
我构建了一个响应大小的面板，如下所示：
<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 标记处停止工作。与此一样，面板将根据视口宽度调整大小，但超过 300 像素宽度时无法点击。当面板宽度超过 300px 时，部分按钮可点击，部分按钮不可点击。我已经尝试添加 !important 到所有内容，它也无济于事。我使用的是 jQuery 移动版 1.4.3（对于桌面版网站，我只是喜欢面板、表单和按钮的外观比桌面版 jQuery 更好）。是的，我调用了 jQuery 及其 CSS 作为 head 标签中的最后内容，否则面板根本无法工作
我在黑暗中拍照，因为我看不到您标记的其余部分。
我在 http://jsfiddle.net/a9f22n70/1/ 处模拟了一个 Fiddle 我认为你的意思。在加载时，我看到面板元素（通过 jQuery 移动设备）添加了一堆 classes，这导致我在桌面上出现布局问题。我在加载时删除了所有 classes 并重新添加了 "ui-panel" class。这为我清理了一切。
我用来测试的标记是：
<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-form 元素。
正如他们所说，假设是万物之母......所以希望我一语中的！
更新
检查您 fiddle 中的代码后，（对我而言）问题是面板本身存在 class "ui-panel-dismiss"。删除此 class（通过我用于测试的检查器工具）纠正了此问题。
这有点 hack，但您可以在页面加载后使用 jQuery 从面板中删除此 class，使用 removeClass(); 函数。
编辑
这是一个有效的 fiddle 解决问题：http://jsfiddle.net/smoewxd4/3/
最终判决
您在评论中提出的 CSS 解决方案有效，但会导致所有面板都设置为 50% 宽。我建议使用这个 CSS 选择器，而不是使其特定于 #add-form 元素，并消除使用 !important:
#add-form.ui-panel.ui-panel-dismiss{
width:50%;
}