动态切换jQuery移动列表视图的拆分按钮

Question

我正在使用jquery mobile构建移动应用。我正在使用listview控件，到目前为止它工作正常。 但是我想显示一个分割按钮（http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/#list-split），但只有在单击某个按钮时才会显示。用例是启用/禁用“删除模式”，以便仅在单击工具栏上的按钮后才会在列表元素旁边显示删除图标。我有一个或多或少的工作解决方案如下：

$('#editmode').live('click', function(e){
e.preventDefault();
$('.deletelog').toggle();
$('.deletelog:hidden').closest('li').removeClass("ui-li-has-alt");
$('.deletelog:visible').closest('li').addClass("ui-li-has-alt");
}); 

问题是，对于第一页加载，即使默认情况下隐藏按钮：

<a href="#" class="deletelog" style="display:none">Delete</a>

我仍然需要添加数据属性data-split-icon和data-split-theme，这使得第一页加载看起来像是为按钮保留了一个空间。从上面的代码中可以看出，这是因为类“data-split-theme”。因此，如果我切换它，那么第二次切换就会令人失望。

有没有更好的方法来实现这样的切换按钮？

谢谢！

Answer 1

您可以通过添加类并使用jQuery对其进行操作来显示和隐藏拆分按钮。

显示

$('.delete').css('display', 'compact');

隐藏

$('.delete').css('display', 'none');

查看这个小提琴http://jsfiddle.net/mayooresan/2XxJx/

更新

在这种情况下，您需要更新ui-li-aside

的CSS

$('.ui-li-aside ').css('margin-right', '50px');

查看这个实时小提琴http://jsfiddle.net/mayooresan/2XxJx/3/