javascript - 动态切换 jQuery 移动 ListView 的拆分按钮

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');

看看这个 fiddle http://jsfiddle.net/mayooresan/2XxJx/

更新

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

的 css

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

检查这个现场 fiddle http://jsfiddle.net/mayooresan/2XxJx/3/