来自框的内部页面隐藏下拉菜单（Wordpress）

Question

我正在尝试完成一个我以前没有做过的奇怪请求。我无法链接到有问题的页面，因为它位于身份验证墙后面，但这是一个关于如何完成此操作的一般性问题。

以下是样机相关部分的屏幕截图：http://imgur.com/a/l7TJ6

我已经将这些带有图像和标题等的框排成两行，就像它们在样机中一样，但我不确定制作这个可折叠的隐藏菜单的最佳方法项目或底部的左右导航部分。

非常感谢任何帮助。谢谢大家。

<div id="individuals-full"><h1 style="text-align: center;">We assist    individual clients to find personalized solutions involving:</h1>
<br/>
<ul>
<li><a href="#"><div id="finance" class="individual-icons"><img  class="aligncenter size-medium wp-image-1268" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/finance-visas-01-300x300.png" alt="" width="300" height="300"><h1 style="text-align: center;">Finance <br/>Visas</h1></div></a></li>
<li><a href="#"><div id="green-cards" class="individual-icons"><img class="aligncenter size-medium wp-image-1270" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/marriage-based-green-cards-01-300x300.png" alt="" width="300" height="300"><h1 style="text-align: center;">Marriage-Based Green Cards</h1></div></a></li>
<li><a href="#"><div id="removal-of-conditional-residence" class="individual-icons"><img class="aligncenter size-medium wp-image-1273" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/removal-of-conditional-residence-01-300x300.png" alt="" width="300" height="300"></p><h1 style="text-align: center;">Removal of Conditions</h1></div></a></li>
<li><a href="#"><div id="naturalization" class="individual-icons"><img class="aligncenter size-medium wp-image-1271" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/naturalization-and-citizenship-01-300x300.png" alt="" width="300" height="300"><h1 style="text-align: center;">Naturalization &amp; Citizenship</h1></div></a></li>
<li><a href="#"><div id="adjustment-of-status" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/adjustment-of-status-01-300x300.png" alt="" width="300" height="300"><h1 style="text-align: center;">Adjustment of Status</h1></div></a></li>
<li><a href="#"><div id="waivers" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/waivers-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Waivers</h1>&nbsp;   </div></a></li>
<li><a href="#"><div id="consular-processing" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/consular-processing-02-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Consular Processing</h1></div></a></li>
<li><a href="#"><div id="visas-for-victims" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/visa-for-victims-of-crimes-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Visas for Victims of Crimes</h1></div></a></li>
<li><a href="#"><div id="special-immigrant-juveniles" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/special-immigrant-juveniles-02-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Special Immigrant Juveniles</h1></div></a></li>
<li><a href="#"><div id="asylum" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/asylum-01-1.png" alt="" width="220" height="220"><h1 style="text-align: center;">Asylum<br/>&nbsp;  </h1></div></a></li>
<li><a href="#"><div id="investment-visas" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/investment-visas-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Investment <br/>Visas</h1></div></a></li>
<li><a href="#"><div id="daca-icon" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/daca-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Deferred Action for Childhood Arrivals</h1></div></a></li>
<li><a href="#"><div id="dapa-icon" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/dapa-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Deferred Action for Parental Accountability</h1></div></a></li>
<li><a href="#"><div id="removal-deportation-defense" class="individual-icons"><img class="aligncenter size-medium wp-image-1261" src="http://cmattayers.com/poarch/wp-content/uploads/2017/02/removal-and-deportation-defense-01.png" alt="" width="300" height="300"><h1 style="text-align: center;">Removal &amp; Deportation Defense</h1></div></a></li>
</ul>
</div>

Answer 1

创建包含所有这些的单行滑块和一个隐藏的 div。单击时（@slider 元素之一）使用 js 将数据附加到 div。