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宽度范围内无法点击任何内容。当面板宽度超过300px时，部分按钮将是可点击的，而部分按钮不会被取消。我尝试过添加！对所有内容都很重要，它也没有任何帮助。我使用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”类的存在。删除此类（通过我的检查器工具进行测试）纠正了这个问题。

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

修改

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

最终结论

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

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

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

1 个答案: