Question

我有一组页面上必不可少的下拉列表。每个清单都有一个标题。单击标题时，列表的高度将从0过渡到列表的高度（以像素为单位）;这使得列表成长为一种动态。

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

加载页面时，所有列表都已打开
以像素为单位抓取每个列表的高度，并将其放入数组heights
将每个列表的高度设置为0，以隐藏它们。
单击列表的标题时，将其转换为存储在数组

我遇到的问题是尝试将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

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

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

$('#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);

我不知道确切的要求，但可以简化为

$('#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>

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

1 个答案: