带有隐藏元素的 JQM 填充答案

【问题标题】：JQM Padding With Hidden Elements带有隐藏元素的 JQM 填充
【发布时间】：2013-07-08 18:17:56
【问题描述】：

我的问题的示例小提琴： http://fiddle.jshell.net/FS8rj/

我有一些地方不希望用户能够使用图标从可折叠文件中删除某些内容，因此我想完全隐藏此图标。

似乎 jQuery Mobile 为可折叠元素中的每个元素添加了填充，这样元素就不会聚集在一起。

我尝试刷新整个列表视图，但 jQuery Mobile 无法识别我已经使用 jQuery 隐藏了一个元素，并且无论如何它都会继续添加填充。我知道一种解决方法是禁用图标而不是隐藏它，但我根本不想让它在屏幕上显示为灰色。

是否可以在不使用更多 css 或类似方法覆盖的情况下禁用它？

【问题讨论】：

【解决方案1】：

jQuery Mobile 使用拆分按钮将ui-li-has-alt 添加到li。您只需删除该类并在再次显示按钮时将其添加回来。

Demo

~~$('li').removeClass('ui-li-has-alt');~~

编辑：使用.closest()从父li中删除类。

$('.hide').hide().closest('li').removeClass('ui-li-has-alt');

【讨论】：

哦，整洁。谢谢@奥马尔。我在这里唯一改变的是你的 jQuery 选择器是 $('.delete').parent().removeClass('ui-li-has-alt');如果我要使用您的选择器，那么页面上的每个 li 都会受到影响——即使是在我的示例中我没有用 .delete 标记的那些。通过这种方式，您可以将想要拥有图标的元素与不想要的元素交织在一起。例如：fiddle.jshell.net/hJyzq
@EricHotinger 或使用.closest()，您将在JQM 中经常使用它$('.hide').hide().closest('li').removeClass('ui-li-has-alt');fiddle.jshell.net/Palestinian/hJyzq/1

【解决方案2】：

http://fiddle.jshell.net/njAt4/

只需将 a 标记与您的删除类一起包装在一个 div 中，然后它就可以按您的意愿工作。

<div class="delete">
   <a href="#" data-rel="popup" data-mini="false" data-position-to="window" data-icon="delete"></a>
</div>

这将完全删除该节点上的删除图标。

【讨论】：

如果你这样做的话，jQuery mobile 似乎会不理会事物的样式。我在尝试使用自定义标头时偶然发现了这一点，并且文档中提到：“如果您需要创建一个不遵循默认配置的标头，只需将您的自定义样式标记包装在任何容器中，例如 div。插件赢了'不将自动按钮逻辑应用于标题容器内的包装内容，以便您可以编写自定义样式来布置标题中的内容。"
再想一想，无论课程是否存在，这都会删除图标，并且可能不是您想要的！
是的。这实际上不是我想要的。我希望能够选择任何给定的类并从中删除所有图标。 +1 注意到这一点。也很奇怪……

【解决方案3】：

http://fiddle.jshell.net/YGCQM/

解决方案是将“ui-li-count”的右侧 css 属性覆盖为 10px。当有按钮时，无论是否隐藏，它都会更改为 53px。

if (reportViewModel.hasDisabledExpenses()) {
    $('.delete').hide();
    $('.delete').parent().find(".ui-li-count").css("right", "10px");
}

【讨论】：