0

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

<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 mobile 1.4.3（对于桌面站点，我只是喜欢面板、表单和按钮的外观，而不是桌面 jQuery）。是的，我将 jQuery 和它的 CSS 称为 head 标签中的最后一件事，否则面板根本无法工作

4

1 回答 1

0

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

我在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”类。删除这个类（通过我的检查工具进行测试）纠正了这个问题。

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

编辑

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

最终判决

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

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

于 2015-01-21T09:20:46.003 回答