jQuery 可折叠 UL [英] jQuery collapsible UL

问题描述

我正在使用 jQuery 和 HTML 创建一个导航系统.我想要实现的是在页面加载时可见父元素并隐藏子元素.我做得非常简单.

但是，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我一次只能打开一个

.

这是我的代码，或者你可以看到我的jsFiddle:

index.html

<h1 class="boxheadings">其他功能</h1><p class="boxp">单击此按钮可在新窗口中查看您当前发布的站点.这不会显示您最近的更改，直到您单击右侧的发布更改"按钮，或者单击查看本地以查看未发布的更改.</p><ul id="usernav"><li class="parent">管理<ul class="child"><li>child11</li><li>child12</li>

<li class="parent">订阅<ul class="child"><li>电子简报</li><li>电子简报订阅</li><li>知识简报</li><li class="parent">媒体商店<ul class="child"><li>图片存储</li><li>文档存储</li><li>媒体商店</li></ul></div>

js/js.js

//用户导航$('.child').hide();$('.parent').click(function() {$(this).find('ul').slideToggle();});

解决方案

done .这很简单.在显示当前 ul 之前，我隐藏了所有内容.

见:

//最初隐藏所有孩子$('.child').hide();//为每个父级添加一个点击处理程序$('.parent').click(function() {//向上滑动已经打开的孩子$('.child').slideUp();//找到被点击的父级的子级并切换其可见性$(this).find('ul').slideToggle();});

I'm creating a navigation system using jQuery and HTML. What I want to achieve is having the parent elements visible on the page load and the child elements hidden. Which I have done very simply.

However when I toggle between the other parent elements I want to be able to hide the previous child elements so that I can only open up one <ul> at a time.

This is my code or you may see my jsFiddle:

index.html

<div class="rightBottom">
    <h1 class="boxheadings">Other functions</h1>
               <p class="boxp">Click this button to view your current published site in a new window. This will not show your most recent changes until you click the ‘Publish Changes’ button on the right, alternatively click view local to see unpublished changes.</p>
     <ul id="usernav">
    <li class="parent">Manage
        <ul class="child">
            <li>child11</li>
            <li>child12</li>
        </ul>
    </li>
    <li class="parent">Subscriptions
        <ul class="child">
            <li>E-Briefings</li>
            <li>E-Briefings Subscriptions</li>
            <li>Knowledge Briefings</li>
        </ul>
    </li>
      <li class="parent">Media Store
        <ul class="child">
            <li>Image Store</li>
            <li>Document Store</li>
            <li>Media Store</li>
        </ul>
    </li>
</ul></div>

js/js.js

//user nav
 $('.child').hide();
$('.parent').click(function() {
    $(this).find('ul').slideToggle();
});

解决方案

done . it was very simple. I am hiding everything before showing the current ul.

see :

//hide all children initially
$('.child').hide();

//adding a click handlers to every all parents
$('.parent').click(function() {

   //slide up the children which are open already
   $('.child').slideUp();

   //find the child of clicked parent and toggle its visibility
   $(this).find('ul').slideToggle();
});

这篇关于jQuery 可折叠 UL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！