1

我有两组 div——一组是“主”div，一组是“额外”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...

4

4 回答 4

1

如果你为你的 div 分配一个 data 属性，这很容易：

<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 示例

于 2013-09-10T15:46:41.930 回答
0

您是否尝试过替换这个：

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

...有了这个：

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

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

于 2013-09-10T15:38:53.827 回答
0

尝试

$('.each-business-content').click(function () {
  var that = $(this);
  $('.each-business-content').each(function () {
    if ($(this) === that) {
      $(this).slideUp();
    } else {
      $(this).slideDown();
    }
  });
});
于 2013-09-10T15:46:22.470 回答
0

你可以在 jsFiddle 试试这个代码吗？不需要组 1 和组 2，我用 index 代替 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();
});
于 2013-09-10T16:17:56.313 回答