javascript - 内部页面隐藏下拉菜单(Wordpress)

Question

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

以下是相关模型部分的屏幕截图:/image/U4Zne.jpg

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

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

<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 。单击(元素之一 @slider)时，使用 js 将数据附加到 div。