Question

我有两组div - 一组是'main'div，另一组是'extra'div。这两个类都有通过CMS引入的类。

在点击时，显示/隐藏（最好是slideToggle）每个div的最佳方法是什么？对应于点击的div？

<div class="each-business-content-main" data-id="group-1"></div>
<div class="each-business-content-main" data-id="group-2"></div>
<div class="each-business-content-extra group-1"></div>
<div class="each-business-content-extra group-2"></div>

这些'group-1'或'group-2'类不是事先知道的，所以不能硬编码。基本上我想知道如果你点击一个div它会显示另一个div（只要他们共享相同的班级名称）。

到目前为止我已经尝试过了：

$('.each-business-content-main').on('click', function (e) {
        e.preventDefault();
    var id = $(this).data('id');
    jQuery('.each-business-content-extra').slideUp();
    jQuery('.each-business-content-extra .' + id).slideDown();
});

但我猜hrefs和id可能会有用吗？或者其他一些数据ID ......

Answer 1

如果你为div分配一个数据属性，那么这很容易：

<div class="each-business-content-main group-1" data-group="1">main 1</div>
<div class="each-business-content-main group-2" data-group="2">main 2</div>
<div class="each-business-content-extra group-1" data-group="1">extra 1</div>
<div class="each-business-content-extra group-2" data-group="2">extra 2</div>
$('.each-business-content-main').click(function () {
    $('.each-business-content-extra.group-' + $(this).data('group')).slideToggle();
});

<强> jsFiddle example

Answer 2

您是否尝试过替换它：

jQuery('.each-business-content .' + id).slideDown();

......用这个：

jQuery('.each-business-content #' + id).slideDown();

jQuery选择类名为.classname，ID为#id。

Answer 3

尝试

$('.each-business-content').click(function () {
  var that = $(this);
  $('.each-business-content').each(function () {
    if ($(this) === that) {
      $(this).slideUp();
    } else {
      $(this).slideDown();
    }
  });
});

Answer 4

你能试试这个code at jsFiddle吗？不需要组1和组2，我使用索引而不是id的名称。这样对你好吗？

$('.each-business-content-main').on('click', function (e) {
    $('.each-business-content-extra').(':eq(' + $(this).index() + ')').slideDown();
    $('.each-business-content-extra').not(':eq(' + $(this).index() + ')').slideUp();
});

如果div类名匹配，则单击显示/隐藏div

4 个答案: