Скрыть блоки, если их более заданного количества при вложенности

242

31 августа 2017, 21:47

Есть аккордеоны, внутри которых тоже аккордеоны (на данный момент их может быть более трех). Так вот, если количество вложений (других аккордеонов) в аккордеоне верхнего уровня превышает, к примеру, три штуки - их мы скрываем. Проблема в том, что никак не могу понять как проверять количество вложений внутри других вложений. Как видно Level 2 скрывает блоки правильно, но в Level 1 при более глубокой вложенности Sub Level 1 Option 1 имеет три скрытых элемента, вместо двух. Есть идеи как решить? На codepen'e. Сам код ниже:

console.clear(); 
 
let expands = document.querySelectorAll('.wrapper > .expand'); 
 
expands.forEach(expand => { 
	let title = expand.querySelectorAll('.title'); 
	let expandAsExpand = expand.querySelectorAll('.expand'); 
	 
	Array.from(expandAsExpand).filter((item, index) => { 
		if(index > 2) { 
			item.style.display = 'none'; 
		} 
	}) 
	title.forEach(title_item => { 
		title_item.addEventListener('click', ({target}) => { 
			target.parentElement.classList.toggle('active') 
		})	 
	})	 
})

* { 
  box-sizing: border-box; 
} 
 
body { 
  font-family: sans-serif; 
  background-color: #c0c0c0; 
} 
 
.wrapper { 
  width: 414px; 
  margin: 30px auto; 
  box-shadow: 0 0 60px -5px rgba(0, 0, 0, 0.3); 
  background-color: #fff; 
  padding: 2rem; 
} 
 
.expand.active > .title { 
  background-color: rgba(0, 0, 0, 0.2); 
} 
.expand.active > .content { 
  height: 100%; 
} 
.expand .title { 
  margin: 0 0 .5rem; 
  display: inline-block; 
  padding: .25rem .5rem; 
  cursor: pointer; 
  -webkit-transition: .3s; 
  transition: .3s; 
} 
.expand .title:hover { 
  background-color: rgba(0, 0, 0, 0.2); 
} 
.expand .expand { 
  margin-left: 1rem; 
} 
.expand .content { 
  height: 0; 
  overflow: hidden; 
}

<div class="wrapper"> 
	<div class="expand test"> 
		<div class="title">Level 1</div> 
		<div class="content"> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 1</div> 
				<div class="content"> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 1</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 2</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 3</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 4</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 5</div> 
						<div class="content"> 
 
						</div> 
					</div> 
				</div> 
			</div>			 
		</div> 
	</div> 
	<div class="expand test"> 
		<div class="title">Level 2</div> 
		<div class="content"> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 1</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 2</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 3</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 4</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 5</div> 
				<div class="content"> 
 
				</div> 
			</div> 
		</div> 
	</div>	 
</div>

Answer 1

Выборка по css селектору :nth-child(n+3) думаю поможет

console.clear(); 
 
let expands = document.querySelectorAll('.wrapper > .expand'); 
 
expands.forEach(expand => { 
	let title = expand.querySelectorAll('.title'); 
	let expandAsExpand = expand.querySelectorAll(':nth-child(n+3)'); 
   
  for(let item of expandAsExpand) { 
    item.style.display = 'none'; 
  } 
	title.forEach(title_item => { 
		title_item.addEventListener('click', ({target}) => { 
			target.parentElement.classList.toggle('active') 
		})	 
	})	 
})

* { 
  box-sizing: border-box; 
} 
 
body { 
  font-family: sans-serif; 
  background-color: #c0c0c0; 
} 
 
.wrapper { 
  width: 414px; 
  margin: 30px auto; 
  box-shadow: 0 0 60px -5px rgba(0, 0, 0, 0.3); 
  background-color: #fff; 
  padding: 2rem; 
} 
 
.expand.active > .title { 
  background-color: rgba(0, 0, 0, 0.2); 
} 
.expand.active > .content { 
  height: 100%; 
} 
.expand .title { 
  margin: 0 0 .5rem; 
  display: inline-block; 
  padding: .25rem .5rem; 
  cursor: pointer; 
  -webkit-transition: .3s; 
  transition: .3s; 
} 
.expand .title:hover { 
  background-color: rgba(0, 0, 0, 0.2); 
} 
.expand .expand { 
  margin-left: 1rem; 
} 
.expand .content { 
  height: 0; 
  overflow: hidden; 
}

<div class="wrapper"> 
	<div class="expand test"> 
		<div class="title">Level 1</div> 
		<div class="content"> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 1</div> 
				<div class="content"> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 1</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 2</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 3</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 4</div> 
						<div class="content"> 
 
						</div> 
					</div> 
					<div class="expand"> 
						<div class="title">Sub Level 2 Option 5</div> 
						<div class="content"> 
 
						</div> 
					</div> 
				</div> 
			</div>			 
		</div> 
	</div> 
	<div class="expand test"> 
		<div class="title">Level 2</div> 
		<div class="content"> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 1</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 2</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 3</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 4</div> 
				<div class="content"> 
 
				</div> 
			</div> 
			<div class="expand"> 
				<div class="title">Sub Level 1 Option 5</div> 
				<div class="content"> 
 
				</div> 
			</div> 
		</div> 
	</div>	 
</div>