<ul><li> 点击时显示/隐藏子菜单答案

【问题标题】：<ul><li> show/hide sub-menu on click<ul><li> 点击时显示/隐藏子菜单
【发布时间】：2012-11-15 22:09:40
【问题描述】：

我想在页脚中列出我网站的（内置 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>

【问题讨论】：

好吧，我已经摆脱了每个
的主题背景图像，我已经让子
缩进了，但仅此而已。我认为让子
显示在一行而不是彼此上方/下方是通过 display:inline; 完成的。但我不确定如何应用它。至于让孩子
在点击父母时显示/隐藏，我不知道......