• JS

JAVASCRIPT를 이용하여 HEIGHT 값이 제일 높은것으로 지정

2018-12-04 421

설명

  • 카카오톡 링크

JAVASCRIPT를 이용하여 HEIGHT 값이 제일 높은것으로 지정하는 소스입니다~! :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	ul.test_ul {display:inline-block; width:100%; font-size:0}
	ul.test_ul > li {display:inline-block; width:33.333%; background:#f2849e; vertical-align:top; box-sizing:border-box; border:1px solid #404040}
	ul.test_ul > li a {font-size:14px; color:#fff}
</style>
<h3 class="view_h3">JAVASCRIPT를 안먹인것</h3>
<ul class="test_ul">
	<li><a href="javascript">테스트1</a>
		<ul>
			<li><a href="javascript:;">테스트1_1</a></li>
			<li><a href="javascript:;">테스트1_2</a></li>
			<li><a href="javascript:;">테스트1_3</a></li>
			<li><a href="javascript:;">테스트1_4</a></li>
		</ul>
	</li>
	<li><a href="javascript">테스트2</a>
		<ul>
			<li><a href="javascript:;">테스트2_1</a></li>
			<li><a href="javascript:;">테스트2_2</a></li>
			<li><a href="javascript:;">테스트2_3</a></li>
			<li><a href="javascript:;">테스트2_4</a></li>
			<li><a href="javascript:;">테스트2_5</a></li>
			<li><a href="javascript:;">테스트2_6</a></li>
			<li><a href="javascript:;">테스트2_7</a></li>
		</ul>
	</li>
	<li><a href="javascript">테스트3</a>
		<ul>
			<li><a href="javascript:;">테스트3_1</a></li>
			<li><a href="javascript:;">테스트3_2</a></li>
			<li><a href="javascript:;">테스트3_3</a></li>
			<li><a href="javascript:;">테스트3_4</a></li>
		</ul>
	</li>
</ul>

<h3 class="view_h3">JAVASCRIPT를 먹인것</h3>
<ul class="test_ul test_ul2">
	<li><a href="javascript">테스트1</a>
		<ul>
			<li><a href="javascript:;">테스트1_1</a></li>
			<li><a href="javascript:;">테스트1_2</a></li>
			<li><a href="javascript:;">테스트1_3</a></li>
			<li><a href="javascript:;">테스트1_4</a></li>
		</ul>
	</li>
	<li><a href="javascript">테스트2</a>
		<ul>
			<li><a href="javascript:;">테스트2_1</a></li>
			<li><a href="javascript:;">테스트2_2</a></li>
			<li><a href="javascript:;">테스트2_3</a></li>
			<li><a href="javascript:;">테스트2_4</a></li>
			<li><a href="javascript:;">테스트2_5</a></li>
			<li><a href="javascript:;">테스트2_6</a></li>
			<li><a href="javascript:;">테스트2_7</a></li>
		</ul>
	</li>
	<li><a href="javascript">테스트3</a>
		<ul>
			<li><a href="javascript:;">테스트3_1</a></li>
			<li><a href="javascript:;">테스트3_2</a></li>
			<li><a href="javascript:;">테스트3_3</a></li>
			<li><a href="javascript:;">테스트3_4</a></li>
		</ul>
	</li>
</ul>

<script type="text/javascript">
	show_gnb();
	// Show gnb
	function show_gnb() {
		var $liList = $(".test_ul2 > li");
		var liListArray = $liList.map(function(){
			return $(this).height();
		})
		console.log(liListArray);
		$(".test_ul2 > li").css({"height":Math.max.apply(Math , liListArray)});
	}
</script>