jQueryがアクティブクラスで切り替える

Question

私はこのように「はい/いいえ」オプションを持つメニューを持っています。

単語を含む赤のカラーボックスは、「はい」私のアクティブなボタンです。ユーザーがの場合はをクリックしたときに別のオプションを表示したいだけです。そこでjQueryのトグル機能を使用しました。

ページが読み込まれると、このようなオプションがメニューに表示されます。

しかし、私は、ユーザーが[はい]をクリックするまで、それを表示する必要はありません。私は問題を理解しました。 はいボタンにアクティブなクラスがアクティブ化されているために発生しました。それがそのオプションを示す理由です。また、をクリックしたときに、そのトグルメニューオプションを非表示にする必要があります。。

別のクラスをに追加していないjquery hide関数を試しました。です。それは大丈夫だが専門家の助言が必要だ。

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

ここではjsfiddleとなります。

Answer 1

はい、あなたはそのクリックを除き、正常に見えるしているものを「はい」二回隠し、ショー、そしてあなたはそれを望んでいないだろう。これを解決するには、.click() JQuery関数にfadeToggleの代わりにfadeInを使用してください。

、他の問題を解決するため、このCSSを使用するには、次の

.wrap { 
    display: none; 
} 

をそして「はい」ボタンから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>

Answer 2

このCSSを追加してください。

.wrap { 
    display: none; 
} 

次に、.wrapクラスは先頭に表示されません。ここで

はフィドルある - https://jsfiddle.net/jkLank8b/12/

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>