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

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

<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时，部分按钮可点击，部分按钮不可点击。我已经试着添加了！这对任何事情都很重要，但也没有帮助。我使用的是jquerymobile1.4.3（对于桌面站点，我只是喜欢面板、表单和按钮的外观，而不是桌面jQuery）。是的，我已经将jQuery及其CSS称为head标记中的最后一项，否则面板根本无法工作

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

我对你的意思一窍不通。在加载时，我看到一些类被添加到panel元素中（由jquerymobile创建），这些类给我在桌面上的布局带来了问题。我删除了所有加载的类，并重新添加了“ui面板”类。这为我清理了一切

我用来测试的标记是：

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

同样，我假设您只想将#add form元素作为目标

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

更新

在检查了小提琴中的代码之后，问题（对我来说）是panel itslef上是否存在类“ui panel Disclose”。删除此类（通过我的inspector工具进行测试）纠正了此问题

这有点像黑客，但是您可以在页面加载后使用jQuery，使用

removeClass（）从面板中删除这个类函数

编辑

下面是一把解决问题的小提琴：

最终裁决

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

#add-form.ui-panel.ui-panel-disclose{
宽度：50%；
}
有什么方法可以将HTML、CSS和JS（如果有额外的）粘贴到一个提琴中吗？我制作了一个提琴（），将结果窗口的大小调整到可能的最大值（大约800px宽），并注意到面板在左边缘前大约40个像素处停止可点击。另外，暴躁猫只是我在谷歌上搜索的一个占位符，因为实际的背景还没有在线。你的假设是（我希望？）我想要添加表单元素是正确的，但是添加代码会在左侧创建一个几乎无法关闭的面板，而不是全高。奇怪…好吧，我看不到代码所在的标记环境。我建议把它放到提琴中，这样我可以更好地帮助您。OK会将页面的大部分内容添加到提琴中，但它似乎确实显示了问题，即使代码已经存在。（我也应该上传并链接外部图像吗？）请不要介意链接下丑陋的蓝色线条，在测试版本中，它们通过修改jquery.mobile-1.4.3.min.css而消失（添加“text-decoration:none！important；”到任何带有：hover的内容中）。然而，使用jquerymobile副本的fiddle代码也有问题，所以我知道这不是问题所在。
$(document).ready(function(){
    $("#add-form").attr("class","").addClass("ui-panel");
})