< ul< li>单击显示/隐藏子菜单 [英] <ul><li> show/hide sub-menu on click

问题描述

我想在页脚中列出我网站的页面(内置php和wordpress)，以使所有顶级页面都垂直列出而没有项目符号，并且列出具有子页面的那些顶级页面单击顶层页面时.再次单击父页面时，子页面将隐藏.我希望所有内容都是纯文本格式，没有图形.

I would like to list my site's (built in php and wordpress) pages in the footer in such a away that all of the top level pages are listed vertically with no bullet, and those top level pages that have child pages are listed when the top-level page is clicked on. The child pages hide when it's parent page is clicked on again. I'd like it all to be in plain text with no graphics.

所以本质上是这样的:

首页
关于The Motel V
    与业主见面|客房|设施|画廊|来宾反馈
城市和国家/地区> (如果单击，它将显示要做的事情和活动|事件日历")
预订
联系
博客

Home
About The Motel V
     Meet The Owners | Rooms | Facilities | Galleries | Guest's Feedback
City and Country > (if clicked, it would show 'Things To Do And See | Event Calendar')
Bookings
Contact
Blog

编辑

我明白了您的建议，但是该列表是由wordpress通过将页面列表"添加到页脚小部件区域中生成的，因此我无法添加唯一的ID ...

I see what you're suggesting, but the list is generated by wordpress by adding the "pages list" to the footer widget area, so I can't add a unique id...

这是页面加载完成时源中的内容.

This is what is in the source when the page is finished loading.

<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进行此操作.尝试使用唯一的ID并将其用于您的jquery click事件，而不是使用锚点的"onclick"属性

You can do it with jquery. Instead of using the "onclick" property of an anchor try putting a unique id and use it for your jquery click event

<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>

您不必担心多个子菜单，因为主菜单具有唯一的类属性

You dont need to worry about multiple submenus since the main menus have unique class properties

这篇关于< ul< li>单击显示/隐藏子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！