関連するチェックボックスがオンになっているときに内容を切り替える方法

Question

私のロジックはまっすぐにできません！私はdiv（ 'bandPackageCheck'と呼ばれる）に4つのチェックボックスを持っています。クリックされたときにそれぞれ異なるコンテンツを表示する（greenBoxというdivで）。

1つのチェックボックスをクリックすると、それぞれの 'greenBox' divで 'slideToggle'にしたいが、他のものは何もしない（後でクリックしない限り）。その後、ユーザーが別のものをクリックした場合は、以前にクリックされたものを開いたままにしておきたい（ユーザーがクリックして閉じない限り）。

私は4つのチェックボックスIDを与えましたが、それぞれに異なるコードを使用したくありませんでした。これを効率的に行うにはどうすればよいですか？

HTML：

<div class="bandPackageCheck"> 
    <input type="checkbox" id="checkbox1"> 
    <label for="trioCheckBox"><span>Checkbox 1</span></label> 
</div>  

<div class="greenBox" id="content1"> 

<div class="bandPackageCheck"> 
    <input type="checkbox" id="checkbox2"> 
    <label for="checkbox2"><span>Checkbox 2</span></label> 
</div>  

<div class="greenBox" id="content2"> 

<div class="bandPackageCheck"> 
    <input type="checkbox" id="checkbox3"> 
    <label for="checkbox3"><span>Checkbox 3</span></label> 
</div>  

<div class="greenBox" id="content3"> 

<div class="bandPackageCheck"> 
    <input type="checkbox" id="checkbox4"> 
    <label for="checkbox4"><span>Checkbox 4</span></label> 
</div>  

<div class="greenBox" id="content4"> 

CSS：

input[type=checkbox]{ 
    display:none; 
} 

input[type=checkbox] + label:before{ 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f196"; 
    letter-spacing: 10px; 
    color: deepskyblue; 
    cursor: pointer; 
} 

input[type=checkbox]:checked + label:before{ 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f146"; 
    letter-spacing: 10px; 
    color: deepskyblue; 
} 

jQueryの：あなたが提供できるすべてのアドバイスに

var checkbox = $(".bandPackageCheck"); 
var greenBox = $(".greenBox"); 

$(checkbox).on('change', function(){ 
    if (this.checked){ 
     $(greenBox).slideToggle(200); 
     $(greenBox).not(this).hide(); 
    } else { 
     $(greenBox).slideToggle(200); 
     } 
}); 

ありがとう！私はjQueryの新機能も持っているので、最も高度な方法についてはわからないかもしれません。

Answer 1

toggleの代わりに、slideDownとslideUpとを明示してください。次に、どの要素を操作するかを具体的に指定します。また、ボックスがチェックされているときに何も隠しているのですか？最後に、イベントの委任が必要な場合を除き、onを使用しないでください。コードを複雑にするだけです。私はすべての.greenBox要素を閉じることで、あなたの障害のあるHTMLを修正

// don't bother creating a variable for this unless you need it elsewhere 
$('.bandPackageCheck input[type="checkbox"]').change(function() { 

    // up to the first ancestor .bandPackageCheck encountered, 
    // then across to the next sibling .greenBox 
    var box = $(this).closest('.bandPackageCheck').next('.greenBox'); 

    if (this.checked) { 
     // checked => down; don't leave room for ambiguity with toggle 
     $(box).slideDown(200); 
    } else { 
     $(box).slideUp(200); 
    } 
}); 

Demo

注意。

Answer 2

あなたに問い合わせる要素が間違っています。チェックボックス自体ではなく、チェックボックスを含むdivを照会しています。それはそれは、ここで言われていると

var checkbox = $('.bandPackageCheck input[type="checkbox"]');

あるべきバニラはJavaScriptを使用して代替ソリューションです。これは、スライドアニメーションのCSSトランジションを利用します。

http://codepen.io/realseanp/pen/mPaWMj

JS

const checkboxes = Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]')); 
checkboxes.forEach(checkbox => { 
    checkbox.addEventListener('change', e => { 
    let {checked} = e.currentTarget; 
    let {id} = e.currentTarget.dataset; 
    let contentWrap = document.querySelector(`.content[data-id="${id}"]`); 
    let inner = document.querySelector(`[data-id="${id}"] .inner`); 
    if(checked) { 
     contentWrap.style.height = window.getComputedStyle(inner).getPropertyValue('height'); 
    } else{ 
     contentWrap.style.height = 0; 
    } 
    }); 
}); 

CSS

label { 
    display: block; 
} 
.content { 
    height: 0; 
    transition: .25s height ; 
    overflow: hidden; 
} 

HTML

<label> 
    <input data-id="1" type="checkbox"> 
    Check ME! 
</label> 

<div data-id="1" class="content"> 
    <div class="inner"> 
    Here is some great content for checkbox 1. 
    </div> 
</div> 

<label> 
    <input data-id="2" type="checkbox"> 
    Check ME #2! 
</label> 

<div data-id="2" class="content"> 
    <div class="inner"> 
     Here is some great content for checkbox 2. 
    </div> 
</div>