Jquery 防止 Collapsible Set 发射

Question

我的页面上有一个单选按钮和一些可折叠的集合，这是我想要做的：

1) expanding/collapsing up a accordion 时，我希望单选按钮的值被取消选中（这似乎工作正常）

2) 更改单选按钮的值时，我希望它展开全部或关闭我的所有手风琴并突出显示单选按钮的适当值。但是，当我使用此代码

更改单选按钮“打开所有手风琴”或“关闭所有手风琴”的值时

$('input[name="expand-collapse"]').change(function(e){

    var val = this.value;

    if (val=='open'){

        $('.ui-collapsible-set').children().collapsible('expand');

    } else if (val=='close'){

        $('.ui-collapsible-set').children().collapsible('collapse');

    }

});

代码：

$(".menu").on("collapsibleexpand", function( event, ui )

正在发射，这取消了我的单选按钮的突出显示。如何防止触发更改代码时的可折叠集？

这是我的 jsfiddle 代码：

https://jsfiddle.net/q5haz642/7/

我已经在更改事件的单选按钮上尝试了 e.stopPropagation()，但是没有用。

任何帮助都会很棒。

谢谢

Answer 1

针对您的问题，我创建了一个名为 toggleAll 的 javascript 变量，它是一个布尔值，只有在单击复选框时才会设置为 true...然后设置回 false。

我将你的 "uncheck checkbox" 逻辑移到了它自己的函数中以便于管理，然后会检查 bool 值以确定你是否应该取消选中复选框。

JS:

var toggleAll = false;
$('input[name="expand-collapse"]').change(function(e) {
  var val = this.value;
  toggleAll = true;

  if (val == 'open') {
    $('.ui-collapsible-set').children().collapsible('expand');
  } else if (val == 'close') {
    $('.ui-collapsible-set').children().collapsible('collapse');
  }

  toggleAll = false;
});

$(".menu").on("collapsibleexpand", function(event, ui) {
  uncheck();
}).on("collapsiblecollapse", function(event, ui) {
  uncheck();
});

function uncheck() {
  if (!toggleAll) {
    var $input = $('input[name="expand-collapse"]');
    $input.prop('checked', false);
    $input.checkboxradio('refresh');
  }
}

这是一个有效的 fiddle。

Jquery 防止 Collapsible Set 发射

Jquery Prevent Collapsible Set from firing

jquery

jquery-mobile

jquery-mobile-collapsible