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

由于某种原因，面板似乎在 300 像素处停止工作。如中所示，面板将根据视口宽度调整大小，但超过 300 像素宽则无法点击。当面板宽度超过 300px 时，部分按钮可点击，部分不可点击。我已经尝试将 !important 添加到所有内容中，它也无济于事。我正在使用 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-form 元素。

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

更新

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

这有点小技巧，但您可以在页面加载后使用 jQuery 从面板中删除这个类，使用 removeClass(); 函数。

编辑

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

最终判决

您在 cmets 中提出的 CSS 解决方案有效，但会导致所有面板都设置为 50% 宽。我建议改用这个 CSS 选择器来使其特定于 #add-form 元素，同时避免使用 !important:

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