使用基于已选中/未选中的单选按钮的自定义数据属性显示/隐藏容器

Question

请先看上图。

该任务的目的是能够使用自定义数据属性显示/隐藏容器，以及是否选中/取消选中单选按钮。

所以这是我们的用法

<ul class="radio group">
<li><input name="radio-1" type="radio" value="1">Motorbike</li>
<li><input name="radio-1" type="radio" value="2">Car</li>
<!-- THIS IS OUR TRIGGER -->
<li><input name="radio-1" type="radio" value="3" data-toggle="expand" data-toggle-target=".container">Other</li>
</ul>

<!-- THIS SHOULD BE HIDDEN, IF NOT THEN WE SET IT TO BE HIDDEN ON PAGE LOAD -->
<div class="container">
<!-- SOME CONTEXT -->
</div>

上面的代码展示了我们如何使用HTML标记中的自定义数据属性来执行此操作，当您单击所需的单选按钮时，它可以工作，但是当单击其他单选按钮时，应该像我们一样取消选中活动的属性单击其他单选按钮，然后应该将容器显示出来，但不能完全正常工作。

请看看我的jsFiddle版本！

任何帮助是极大的赞赏 ：）

Answer 1

这是一个解决方案...

https://jsfiddle.net/Farzad/xtwquh7a/

这是已更改的全部代码的一部分；

// IF RADIO BUTTON
  if (_triggerType == 'radio') {

                $('[name="' + _$trigger.attr('name') + '"]').each(function () {

        if ($(this).val() != _$trigger.val())
        {
                        $(this).change(function(event, source){
            if(source != _$trigger.val())
                if(source === undefined)
                _$trigger.trigger("change", _$trigger.val());
              else  
                _$trigger.trigger("change", source);    
          })
        }
      });

    _$trigger.change(function () {
      // CHECKED
      if (this.checked) {
        expandIt(_$target);

        // UNCHECKED
      } else if (!this.checked) {
        collapseIt(_$target);
      }
    });
    }

在花费大量时间后，我的朋友Mihir Solanki终于提出了绝对完美的解决方案！ 再次感谢米希尔:)

希望这也可以帮助其他以前可能遇到过类似任务的人！

谢谢