2

我正在使用 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”类。因此，如果我切换它，那么它会在第二次切换时消失。

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

谢谢！

截图 1 截图 2

4

1 回答 1

1

您可以通过添加一个类并使用 jQuery 操作它来显示和隐藏拆分按钮。

以显示

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

隐藏

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

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

更新

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

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

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

于 2013-03-29T09:05:14.293 回答