javascript - 获取多个元素选择器中元素的索引

Question

我在页面上有一组重要的下拉列表。每个列表都有一个标题。单击标题时，列表的高度将从 0 过渡到列表的高度(以像素为单位)；该动画使列表增长到位。

由于 CSS 的限制，我无法将高度转换为 auto。我必须过渡到具有数值的高度。因为每个列表的高度不同，所以我的解决方法如下:

1. 页面加载时，所有列表都会打开
2. 获取每个列表的高度(以像素为单位)，并将其放入数组 heights
3. 将每个列表的高度设置为 0 以隐藏它们。
4. 单击列表标题时，将其转换为数组中存储的高度

我遇到的问题是尝试将 heights 中的数字索引与页面上单击的 div 帽子的索引关联起来。这是 2 个列表的示例。

<div id="awards">
    <div class="content">
        <div>
            <h1>Alien 3</h1>
            <div>
                <h2>Nominated</h2><hr>
                <p>Hugo Award for Best Dramatic Presentation</p>
                <p>Saturn Award for Best Director</p>
            </div>
        </div>
        <div>
            <h1>Se7en</h1>
            <div>
                <h2>Won</h2><hr>
                <p>Fantasporto for Best Film</p>
            </div>
        </div>
        ...

以及点击事件的 jQuery:

$('#awards h1').click(function () {

    var indexPos = $(this).index('#awards .content div div'); //get index of clicked element out of all '#awards .content div div's (the lists)

    if ($(this).hasClass('open')) {

        $('#awards .content div div').index(indexPos).css('height', heights[indexPos]);

    } else if (!$(this).hasClass('open')) {

        $('#awards .content div div').index(indexPos).css('height', '0');

    }

    $(this).toggleClass('open');

});

为了更好地衡量，以下是文档加载时创建数组的方式:

var heights = [];

$('#awards .content div div').each(function(index, element) {
        heights.push($(this).height());
});

$('#awards .content div div').css('height','0');

那么，我错过了什么？当我设置后检查indexPos的值时，它是-1，又名未找到。我可能对 .index() 的工作原理有误解，但如何修复它？

Answer 1

我认为使用这样的高度不是最好的主意，您可以切换显示属性来隐藏/显示元素。

但是如果您仍然想使用高度，请尝试使用 data 属性而不是数组

$('#awards h1').click(function () {
    var $this = $(this),
        $div = $this.next();

    if ($(this).hasClass('open')) {
        $div.height($div.data('height'));
    } else if (!$(this).hasClass('open')) {
        $div.height(0);
    }

    $(this).toggleClass('open');

});


$('#awards .content div div').each(function (index, element) {
    $(this).data('height', $(this).height())
}).height(0);

<小时/>

我不知 Prop 体的要求，但可以简化为

$('#awards h1').click(function() {
  $(this).toggleClass('open');
});

#awards h1 + div {
  display: none;
}
#awards h1.open {
  color: green;
}
#awards h1.open + div {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="awards">
  <div class="content">
    <div>
      <h1>Alien 3</h1>
      <div>
        <h2>Nominated</h2>
        <hr/>
        <p>Hugo Award for Best Dramatic Presentation</p>
        <p>Saturn Award for Best Director</p>
      </div>
    </div>
    <div>
      <h1>Se7en</h1>
      <div>
        <h2>Won</h2>
        <hr/>
        <p>Fantasporto for Best Film</p>
      </div>
    </div>
  </div>
</div>