单击元素的高度相等

Question

我有一个函数，将列表元素的高度相等。有些元素在display：none中被隐藏，因此它们没有正常的高度，但是当我单击触发元素时它不会出现。

显示的元素都具有相同的高度，当我更改窗口大小时，它也会出现在现在显示的区域中。

这里的问题/错误是什么？

对于演示，我认为它应该更加自解释：

/* Toggle comparison */
$(".compareHideToggler span").click(function() {
	$(".compareHideToggler span").toggleClass("hidden");
	$(".compareArea li.hide").toggleClass("not");
});

/* equal compare heights */
var countEntries = $("section .descriptionRow li").length;

function compareHeight() {
	for (var i =  1; i <= countEntries; i++) {
  var highestElementCompare = 0;
	var $entry = $('.compareArea .entry_'+i);
 
  $entry.each(function() {
    $(this).removeAttr('style');
  });

  $entry.each(function() {
    if ($(this).height() > highestElementCompare) {
      highestElementCompare = $(this).height();
    }
  });

  $entry.each(function() {
    $(this).height(highestElementCompare);
  });
	}
}; 

window.onload = compareHeight;

$(".compareHideToggler span").click(compareHeight);

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(compareHeight, 100);
});

.compareArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.compareArea .compareColumn, .compareArea .descriptionRow {
    width: 25%;
}

.compareArea .descriptionRow header, .compareArea .compareColumn header {
    height: 70px;
}

.compareArea .compareColumn header, .compareArea .descriptionRow header {
    margin-bottom: 20px;
}

ul, ol {
    list-style: none;
}

.compareArea .descriptionRow li {
    font-size: .9rem;
    line-height: 1.6;
}

.compareArea .descriptionRow li strong {
    margin-right: 5px;
    font-size: 1rem;
}

.compareArea li {
    padding: 15px;
}

li, strong, span {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.compareArea .compareColumn {
    text-align: center;
}

.compareArea .compareColumn header strong {
    display: block;
    margin-bottom: 5px;
}

.compareArea .compareColumn li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.compareArea li.hide {
    display: none;
}

.compareArea li.hide.not {
    display: block;
}

.ce_rsce_table .compareHideToggler {
    margin-top: 20px;
    border-top: 1px solid #bdbdbd;
    text-align: center;
}

.compareHideToggler span {
    display: inline-block;
    margin-top: 5px;
    color: #009758;
}

.compareHideToggler .hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<section class="contentComparison">
	<section class="compareArea" id="compare1">
		<section class="descriptionRow">
			<header>
				<div class="description empty"></div>
			</header>
			<ul>
				<li class="entry_1"><strong>Description 1</strong></li>
				<li class="entry_2"><strong>Description 2</strong> </li>
				<li class="entry_3"><strong>Description 3</strong> (Addition)</li>
				<li class="entry_4"><strong>Description 4</strong> </li>
				<li class="entry_5"><strong>Description 5</strong> (Addition)</li>
				<li class="entry_6 hide"><strong>Description 6</strong> </li>
				<li class="entry_7 hide"><strong>Description 7</strong> </li>
				<li class="entry_8 hide"><strong>Description 8</strong> </li>
				<li class="entry_9 hide"><strong>An extra long description for number 9</strong> (And extra long additional Addition)</li>
				<li class="entry_10 hide"><strong>A longer description 10</strong></li>
				<li class="entry_11 hide"><strong>Description 11</strong> (Addition))</li>
			</ul>
		</section>
		<section class="compareColumn" id="colFirst">
			<header>
				<div>
					<strong>Title</strong>								
					<span>(Extratitle)</span>							
				</div>
			</header>
			<ul>
				<li class="entry_1"><i class="material-icons">check</i></li>
				<li class="entry_2"><i class="material-icons">check</i></li>
				<li class="entry_3"><i class="material-icons">check</i></li>
				<li class="entry_4"><i class="material-icons">check</i></li>
				<li class="entry_5"><i class="material-icons">check</i></li>
				<li class="entry_6 hide"><i class="material-icons">check</i></li>
				<li class="entry_7 hide"><i class="material-icons">check</i></li>
				<li class="entry_8 hide"><i class="material-icons">check</i></li>
				<li class="entry_9 hide"><i class="material-icons">check</i></li>
				<li class="entry_10 hide"><i class="material-icons">check</i></li>
				<li class="entry_11 hide"><i class="material-icons">check</i></li>
			</ul>
		</section>
	</section>
	<div class="compareHideToggler">
		<span>show more<i class="material-icons">keyboard_arrow_down</i></span>
		<span class="hidden">show less<i class="material-icons">keyboard_arrow_up</i></span>
	</div>	
</section>

我需要变量，因为它用cms维护并且元素的数量是可变的。