Question

在菜单上，我想在jQuery中应用幻灯片切换或类似内容，默认情况下隐藏li的所有子项。点击li后，它会显示直接子项。显示li的孩子也会隐藏所有其他孩子。

<ul id="navlist">
    <li>Information 1<ul>
        <li>apple1</li>
        <li>Mango1</li>
        <li>Banana1</li>
        </ul>
    </li>
    <li>Information 2<ul>
        <li>apple2</li>
        <li>Mango2</li>
        <li>Banana3</li>
        </ul>
    </li>
    <li>Information 3<ul>
        <li>apple3</li>
        <li>Mango3</li>
        <li>Banana3</li>
        </ul>
    </li>

Answer 1

<ul id="MyMenu">
  <li>
    info 1
    <ul class="inner">
       <li>apple1</li>
       <li>mango1</li>
       <li>banana1</li>
    </ul>
  </li>
  <li>
    info 2
    <ul class="inner">
       <li>apple2</li>
       <li>mango2</li>
       <li>banana2</li>
    </ul>
  </li>
  <li>
    info 3
    <ul class="inner">
       <li>apple3</li>
       <li>mango3</li>
       <li>banana3</li>
    </ul>
  </li>
</ul>

$(function(){
  $('#MyMenu > li').click(function(){
    $('#MyMenu .inner').hide();  //hide all
    $(this).find('ul.inner').show();  // show the clicked submenu
  });
});

Answer 2

lgalSt的答案对你有用。但是，您可以在Accordion中查看jQuery UI（点击查看演示），而不是重新发明轮子。它工作得很好，jQuery UI适用于所有浏览器（你不必担心在IE中不起作用的东西），并且它的设置快速简便。您还可以使用jQuery UI组件主题，以便在整个站点中获得一致的外观。

在jQuery中动画隐藏/显示菜单

2 个答案: