Question

我的页面上有一个单选按钮和一些可折叠的设置，这就是我想要做的事情：

1）当扩展/折叠单个手风琴时，我想要取消选择单选按钮的值（这似乎工作正常）

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变量，这是一个bool，只有在单击一个复选框时才会设置为true ...然后设置回false。

我将“取消选中复选框”逻辑移动到其自己的功能中以便于管理，然后检查该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防止可折叠套装射击

1 个答案: