jquery selector

When elements are at the same level – for example, in a scenario where you click on the corresponding <li> tag – the <div> tag associated with that same <li> tag will be displayed.

html code:

<ul id="open_list">
	<li class="product_Level" data-fid="1">
		<a>云服务器</a>
	</li>
	<div data-id="1" class="list_nome open_list_item">
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=1&gid=1">西南-绵阳电信</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=1&gid=2">西南-西云高防&amp;BGP</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=1&gid=3">香港-精品CN2</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=1&gid=8">美国-CN2直连高防</a>
			</div>
		</li>
	</div>

	<li class="product_Level active " id="open" data-fid="2">
		<a>物理机</a>
	</li>
	<div data-id="2" class="list_nome1 open_list_item">
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=2&gid=4">韩国CN2</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=2&gid=5">枣庄高防&amp;amp;双线</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second  ">
				<a class="text-white" href="/cart?fid=2&gid=6">枣庄高防&amp;三线</a>
			</div>
		</li>
		<li class="products-secondary">
			<div class="product_second active ">
				<a class="text-white" href="/cart?fid=2&gid=9">香港CN2直连活动机</a>
			</div>
		</li>
	</div>
</ul>

When using jQuery to implement a click-to-show or click-to-hide effect, selectors come into play.

jquery：

$('#open_list .open_list_item[data-id='+ $(this).attr('data-fid') +']')

Place this element here; click on `li`, and then you can easily select all `div` elements at the same level as `li`.