我想在页脚中列出我网站的(内置 php 和 wordpress)页面,所有顶级页面都垂直列出,没有元素符号,并且列出了那些有子页面的顶级页面单击顶级页面时。再次单击父页面时,子页面会隐藏。我希望所有内容都是纯文本,没有图形。
所以基本上它会是这样的:
首页
关于汽车旅馆 V
认识业主 |房间 |设施 |画廊 |客人反馈
城市和国家 > (如果点击,它会显示“要做的事和看的事情 | 事件日历”)
预订
联络方式
博客
编辑
我明白你的建议,但该列表是由 wordpress 通过将“页面列表”添加到页脚小部件区域生成的,因此我无法添加唯一 ID...
这是页面加载完成后源代码中的内容。
<div class="widget widget_pages" id="pages-2">
<h4 class="widgettitle">Pages</h4>
<ul>
<li class="page_item page-item-14 current_page_ancestor current_page_parent"><a href="http://mywebsite.com.au/about-the-motel/">About the Motel</a>
<ul class="children">
<li class="page_item page-item-295"><a href="http://mywebsite.com.au/about-the-motel/meet-the-owners/">Meet The Owners</a></li>
<li class="page_item page-item-17"><a href="http://mywebsite.com.au/about-the-motel/rooms/">Rooms</a></li>
<li class="page_item page-item-19 current_page_item"><a href="http://mywebsite.com.au/about-the-motel/facilities/">Facilities</a></li>
<li class="page_item page-item-21"><a href="http://mywebsite.com.au/about-the-motel/galleries/">Galleries</a></li>
<li class="page_item page-item-2"><a href="http://mywebsite.com.au/about-the-motel/feedback/">Visitor Feedback</a></li>
</ul>
</li>
<li class="page_item page-item-10"><a href="http://mywebsite.com.au/city-country/">City and Country</a>
<ul class="children">
<li class="page_item page-item-292"><a href="http://mywebsite.com.au/city-country/things-to-do-and-see/">Things To Do And See</a></li>
<li class="page_item page-item-4"><a href="http://mywebsite.com.au/city-country/events-calendar/">Events Calendar</a></li>
<li class="page_item page-item-53"><a href="http://mywebsite.com.au/city-country/local-links/">Local Links</a></li>
</ul>
</li>
<li class="page_item page-item-5"><a href="http://mywebsite.com.au/bookings/">Bookings</a></li>
<li class="page_item page-item-50"><a href="http://mywebsite.com.au/contact/">Contact</a></li>
<li class="page_item page-item-47"><a href="http://mywebsite.com.au/blog/">Blog</a></li>
</ul>
</div>
最佳答案
您可以使用 jquery 来完成。不要使用 anchor 的“onclick”属性,而是尝试放置一个唯一的 id 并将其用于您的 jquery 点击事件
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(function(){
$(".page-item-10").click(function(){
$(this+" ul").fadeToggle("slow");
});
$(".page-item-14").click(function(){
$(this+" ul").fadeToggle("slow");
});
});
</script>
您不必担心多个子菜单,因为主菜单具有独特的类属性
关于php - <ul><li> 点击显示/隐藏子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13598622/