Question

我有一个菜单，其中包含“是/否”选项。

包含“是”字样的红色框是我的活动按钮。我只想在用户点击是时显示其他选项。所以我使用了jQuery切换功能。

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

但是我不希望在用户点击“是”之前显示它。我发现了问题。之所以发生这种情况是因为是按钮激活了一个活动类。这就是它展示其选择权的原因。我还需要在点击否时隐藏切换菜单选项。

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

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

在这里工作jsfiddle。

Answer 1

只需添加此CSS。

.wrap {
   display: none;
 }

然后，.wrap类在开头就不会显示。

这是小提琴 - https://jsfiddle.net/jkLank8b/12/

Answer 2

是的，除了点击“是”之外，你看起来还不错。两次会隐藏和显示，你不想要那样。要解决此问题，请对fadeIn JQuery函数使用fadeToggle而不是.click()。

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

.wrap {
  display: none;
}

从＆＃39;是＆＃39;中删除active课程。按钮。见：

＆＃13;

$('.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();
  });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这是你需要的吗？ - 从HTML元素中删除了活动类。所以白色将是两个按钮的起始背景颜色 - 默认情况下隐藏.wrap类的元素 - 不是通过jQuery使.wrap可见，我定义了一个带动画的类，并在必要时使用jQuery添加和删除该类。

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

.wrap {
  opacity: 0;
  transition: all 1s ease;
}
.btn-switch.active {
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}
.animate-wrap-show {
  opacity: 1;
}

<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>

jQuery与活动类切换

3 个答案: