Question

我正在使用jQuery和HTML创建导航系统。我想要实现的是在页面加载中显示父元素并隐藏子元素。我做得非常简单。

但是当我在其他父元素之间切换时，我希望能够隐藏前面的子元素，这样我一次只能打开一个<ul>。

这是我的代码，或者您可能会看到我的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();
});

Answer 1

完成了。这很简单。在显示当前的ul之前，我隐藏了所有内容。

见：

//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();
});

Answer 2

使用此

$('.child').hide();
    $('.parent').click(function() {
        $(this).siblings('.parent').find('ul').slideUp();
        $(this).find('ul').slideToggle();
    });

FIDDLE

Answer 3

在扩展任何一个之前，只需折叠所有UL：

在执行slideToggle之前添加此行：

$('#usernav').find('ul').slideUp();

$('.child').hide();
$('.parent').click(function() {
    $('#usernav').find('ul').slideUp();
    $(this).find('ul').slideToggle();
});

jQuery可折叠UL

3 个答案: