带有事件类的 jQuery 切换

Question

我有一个带有“是/否”选项的菜单，就像这样。

包含单词"is"的红色框是我的事件按钮。我只想在用户单击是 时显示其他选项。所以我使用了 jQuery 切换功能。

当页面加载时，它会显示带有选项的菜单，就像这样。

但是我不想在用户点击"is"之前显示它。我想通了这个问题。发生这种情况是因为 yes 按钮激活了一个事件类。这就是它显示其选项的原因。而且我还需要在单击否时隐藏该切换菜单选项。

我尝试使用 jquery 隐藏函数将另一个类添加到 no。看起来不错，但需要专家建议。

$(".remove-toggle").click(function(){
 $(".wrap").hide();
});

工作 jsfiddle在这里。

Answer 1

是的，您所拥有的看起来不错，只是单击"is"两次将隐藏和显示，而您不希望这样。要解决此问题，请为 .click() JQuery 函数使用 fadeIn 而不是 fadeToggle。

要解决其他问题，请使用此 CSS:

.wrap {
  display: none;
}

并从"is"按钮中删除 active 类。看这个:

$('.btn-switch').click(function() {
    var $group = $(this).closest('.form-group');
    $('.btn-switch', $group).removeClass("active");
    $(this).addClass("active");
  });
  $(".activate-toggle").click(function() {
    $(".wrap").fadeIn();
  });
  $(".remove-toggle").click(function() {
    $(".wrap").fadeOut();
  });

.btn-switch.active {
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}
.wrap {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch activate-toggle"> <span class="goods">Yes</span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-switch remove-toggle"><span class="services">No</span>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="wrap">
  <div class="form-group">
    <label for="lastname" class="col-md-5 col-sm-12 control-label">Qualification type</label>
    <div class="col-lg-7 col-md-7 col-sm-12 form-input">
      <input type="text" class="form-control input-std" id="qualification-type">
    </div>
  </div>
</div>