Question

我无法理解我的逻辑！我在div中有4个复选框（名为＆＃39; bandPackageCheck＆＃39;），每个复选框在点击时会显示不同的内容（在div中称为＆＃39; greenBox＆＃39;）。

当我点击一个复选框时，我想要它来滑动切换＆＃39;在其各自的绿色框中＆＃39; div，但让其他人什么都不做（除非他们稍后再点击）。然后，如果用户单击另一个，我也希望保持先前单击的那些打开（除非用户单击以关闭它们）。

我提供了4个复选框ID，但并不想为每个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。它只会使你的代码更复杂。

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

请注意，我通过关闭所有.greenBox元素来纠正错误的HTML。

Answer 2

您要查询的元素复选框错误。您正在查询包含复选框的div，而不是复选框本身。它应该是

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

这里说的是使用vanilla 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>

选中相关复选框后如何切换内容

2 个答案: