Jquery 滑动切换并更改div单击时的div背景色？

假设我在一个ID为“Toggle”的页面上有多个div。 每一个部门都有另外两个部门

“标题”始终可见

“注释”在单击标题时打开/关闭（默认为关闭）

我将如何使用jquery实现这一点？我让它工作了，但页面上只有一个

<script>
    $(function() {
        $('#toggle').on('click', function () {
          $(this).find('#comment').slideToggle(100);
        });
    });
</script>

$（函数（）{
$（'#toggle'）。打开（'click'，函数（）{
$（this.find（“#comment”）.slideToggle（100）；
});
});

---

（也许这是另一个问题，但我也希望在单击“headline”div时将其背景更改为蓝色（并将注释下拉），然后在再次单击“headline”时恢复，将注释向上滑动）

正如我在上面的评论中所说，jQuery目标设置将失败（或者至少不会按照预期的方式操作）如果多次使用ID。在这种情况下，使用类进行样式设置和定位，或者为每个“切换”模块使用唯一的ID

好的，这是你的：）

核心组件[代码笔草图中提供的扩展样式]

HTML

<div class='toggle'>
  <h3 class='headline'>My headline</h3>
  <div class='comments'>
    <ul>
      <li>Comment 1</li>
      <li>Comment 2</li>
      <li>Comment 3</li>
    </ul>
  </div>
</div>

jQuery

$('.headline').on('click', function(){
  $(this).toggleClass('active');
  $(this).next('.comments').toggleClass('open');
});

备选jQuery幻灯片切换

$(this).next('.comments').slideToggle(); // instead of toggling a class

var active = false;

$('.header').on('click', function(){
  if(active == false) {
    $(this).css('background-color', 'blue');
    active = true;
  } else {
    $(this).css('background-color', 'white');
    active = false;
  }
});

希望有帮助

更新：

纯jQuery背景色切换

$(this).next('.comments').slideToggle(); // instead of toggling a class

var active = false;

$('.header').on('click', function(){
  if(active == false) {
    $(this).css('background-color', 'blue');
    active = true;
  } else {
    $(this).css('background-color', 'white');
    active = false;
  }
});

---

正如我在上面的评论中所说，如果多次使用ID，jQuery目标将失败（或者至少不会像预期的那样）。在这种情况下，使用类进行样式设置和定位，或者为每个“切换”模块使用唯一的ID

好的，这是你的：）

核心组件[代码笔草图中提供的扩展样式]

HTML

<div class='toggle'>
  <h3 class='headline'>My headline</h3>
  <div class='comments'>
    <ul>
      <li>Comment 1</li>
      <li>Comment 2</li>
      <li>Comment 3</li>
    </ul>
  </div>
</div>

jQuery

$('.headline').on('click', function(){
  $(this).toggleClass('active');
  $(this).next('.comments').toggleClass('open');
});

备选jQuery幻灯片切换

$(this).next('.comments').slideToggle(); // instead of toggling a class

var active = false;

$('.header').on('click', function(){
  if(active == false) {
    $(this).css('background-color', 'blue');
    active = true;
  } else {
    $(this).css('background-color', 'white');
    active = false;
  }
});

希望有帮助

更新：

纯jQuery背景色切换

$(this).next('.comments').slideToggle(); // instead of toggling a class

var active = false;

$('.header').on('click', function(){
  if(active == false) {
    $(this).css('background-color', 'blue');
    active = true;
  } else {
    $(this).css('background-color', 'white');
    active = false;
  }
});

---

它只使用一个，因为您插入了id='toggle'，而不是使用类，所以它可以在所有情况下使用，在滑动的情况下，请尝试此方法http://jsfiddle.net/MohammadHamza/F64n9/“>Fiddle.

它只使用一个，因为您插入了id='toggle'，而不是使用类，所以它可以在所有情况下工作，并且在滑动尝试的情况下工作这http://jsfiddle.net/MohammadHamza/F64n9/“>Fiddle.

第一件事：由于ID是唯一的标识符，因此不能将ID应用于同一页上的多个元素。这可以说是“非法”的，并且会使jQuery中试图以其为目标的大部分内容都变得无用。首先，由于ID是唯一标识符，因此不能将ID应用于同一页面上的多个元素。可以说，这是“非法”的，并且会使jQuery中试图将其作为目标的大部分内容都变得无用。所以我尝试了您所说的，但它不起作用，但我用以下内容替换了您的jQuery：$（function（）{$（'.toggle'）。on（'click'，function（）{$（This）.find（'.comment'）。slideToggle（125）；}）; 它成功了——但我仍然不知道如何在点击时切换背景。你有没有查看代码笔草图：？关于如何切换bg颜色的例子就在这里。最简单的方法是添加一个类，就像我在CSS中做的那样，给你的标题一个蓝色的背景。然后简单地

toggleClass

点击

.headline

变成类似

.headline.blue的东西，所以我试了一下你说的，结果没有用，但我用以下内容替换了你的jquery:$（function（）{$（'.toggle'）。on（'click'，function（）{$（this）.find（'.comment'）。slideToggle（125）;             });         });      它成功了——但我仍然不知道如何在点击时切换背景。你有没有查看代码笔草图：？关于如何切换bg颜色的例子就在这里。最简单的方法是添加一个类，就像我在CSS中做的那样，给你的标题一个蓝色的背景。然后只需点击
切换class
，将
.headline
切换为
.headline.blue