Question

所以我有两个块元素堆叠在一起。当用户点击顶部时，它应该切换该块内的内容，而第一个下面的块保持不活动状态，不显示任何内容。我在这里的代码打开它们两个，无论点击哪一个。我有我当前的代码添加并删除一个'active'类来标记要显示的div：block或none。

我错过了什么？

function DropDown(element) {
  this.title = element;
  this.initEvents();
}

DropDown.prototype = {
  initEvents: function() {
    var obj = this;
    obj.title.on('click', function(event) {
      $(this).toggleClass('active');
      event.stopPropagation();
    });
  }
}

$(function() {
  var title = new DropDown($('.title'));
  $(document).click(function() {
    $('.drop').removeClass('active');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- block 1 -->
<div class="block1">
  <h3>
    <a href="#" class="title">Title 1<span class="pull-right plus">+</span></a>

  </h3>
  <div class="drop">
    <p class="clearfix">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sagittis est. Quisque dictum nibh justo, non venenatis lorem hendrerit lobortis. Nam eget volutpat tortor, nec blandit urna. In et purus et ipsum vestibulum sagittis nec et lacus. Sed
      gravida justo sed urna faucibus fermentum. Phasellus mollis, arcu et semper placerat, nibh leo fringilla ex, ac dictum turpis nisl sed justo. Etiam non eros tristique, ultrices odio vel, faucibus felis. Cras lorem diam, aliquet ac diam quis, suscipit
      dictum risus. Aliquam fringilla volutpat nulla at cursus. Cras suscipit lacus massa, scelerisque laoreet mi faucibus a.
    </p>
  </div>
</div>

<!-- block 2 -->
<div class="block2">
  <h3>
    <a href="#" class="title">Title 2<span class="pull-right plus">+</span></a>

  </h3>
  <div class="drop">
    <p class="clearfix">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sagittis est. Quisque dictum nibh justo, non venenatis lorem hendrerit lobortis. Nam eget volutpat tortor, nec blandit urna. In et purus et ipsum vestibulum sagittis nec et lacus. Sed
      gravida justo sed urna faucibus fermentum. Phasellus mollis, arcu et semper placerat, nibh leo fringilla ex, ac dictum turpis nisl sed justo. Etiam non eros tristique, ultrices odio vel, faucibus felis. Cras lorem diam, aliquet ac diam quis, suscipit
      dictum risus. Aliquam fringilla volutpat nulla at cursus. Cras suscipit lacus massa, scelerisque laoreet mi faucibus a.
    </p>
  </div>
</div>

Answer 1

我为你创造了一个小提琴。这已更新并正在运行。如果这是您正在寻找的，请检查一下。然后我可以向你解释做了什么here。

obj.title.on('click', function(event) {
        $(this).parent().next('.drop').toggleClass('active');
  event.stopPropagation();
});

此处所做的更改是切换活动类的位置。我正在切换＆＃34; drop＆＃34;元素而不是＆＃34; title＆＃34;元件。

为两个单独的元素应用相同的切换

1 个答案: