Showing/Hiding 使用自定义数据属性的容器，该容器基于 checked/unchecked 的单选按钮

Question

请先看一下上图

此任务的目的是能够 show/hide 使用自定义数据属性的容器以及单选按钮是否 check/unchecked。

下面是我们如何使用它；

<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 终于提出了一个绝对完美的解决方案！再次非常感谢 Mihir :)

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

谢谢

Showing/Hiding 使用自定义数据属性的容器，该容器基于 checked/unchecked 的单选按钮

Showing/Hiding a container using custom data-attribute based on a radio button that's checked/unchecked

javascript

jquery

toggle

custom-data-attribute