Question

因此，假设我在ID为“Toggle”的页面上有多个div。在每个div中还有另外两个div。

“标题”这一直是可见的。
“注释”单击标题时打开/关闭此选项（默认为关闭）。

我如何用jquery做到这一点？我得到了它的工作，但只有页面上有一个。

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

（也许这是另一个问题，但我也希望“标题”div的背景在点击时更改为蓝色（并且评论被删除）并在再次点击“标题”时恢复，滑动评论）

Answer 1

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

好的，这是你的Codepen example :)

核心组件[扩展样式在Codepen草图中可用]

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

<强> CSS

.comments {
  display: none;
}

.comments.open {
  display: block;
}

<强>的jQuery

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

替代jQuery slideToggle

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

希望有所帮助！

<强>更新

纯jQuery背景颜色切换

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;
  }
});

Answer 2

它只使用一个因为你已插入id ='toggle'而不是使用类所以它将适用于所有并且在滑动的情况下尝试这个http://jsfiddle.net/MohammadHamza/F64n9/'> ;小提琴

在div上单击幻灯片并更改div背景颜色？

2 个答案: