下拉菜单点击切换

我正在尝试创建一个下拉菜单，它在点击而不是悬停时激活。到目前为止，我点击工作一点点的JavaScript，但虽然子菜单显示良好，如果另一个菜单被点击其他子菜单隐藏，我不知道如何隐藏子菜单，如果它的父母被点击。下拉菜单点击切换

EG在这JS fiddle我可以点击“父母1”来揭示它的孩子，当我点击“父母2”父母1的孩子隐藏和父母2的孩子显示。但是，如果家长1的孩子表明我想要能够通过再次点击父母1（或者甚至更好的孩子以外的任何地方）来隐藏他们

我见过这样的例子，其中每个父母和子菜单被给予单独的类或IDS。我想避免这种情况，因为它需要在cms中工作。

这里是基本的代码，我有

的HTML：

<div> 
<ul> 
    <li><a href="#">Parent 1</a> 
     <ul> 
      <li><a href="#">Parent 1 &raquo; Child 1</a></li> 
      <li><a href="#">Parent 1 &raquo; Child 1</a></li> 
      <li><a href="#">Parent 1 &raquo; Child 1</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Parent 2</a> 
     <ul> 
      <li><a href="#">Parent 2 &raquo; Child 2</a></li> 
      <li><a href="#">Parent 2 &raquo; Child 2</a></li> 
      <li><a href="#">Parent 2 &raquo; Child 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Parent 3</a> 
     <ul> 
      <li><a href="#">Parent 3 &raquo; Child 3</a></li> 
      <li><a href="#">Parent 3 &raquo; Child 3</a></li> 
      <li><a href="#">Parent 3 &raquo; Child 3</a></li> 
     </ul> 
    </li> 
</ul>

的JavaScript：

$(document).ready(function() { 
    $("li").click(function() { 
     $('li > ul').hide(); 
     $(this).children("ul").toggle(); 
    }); 
});

CSS可能是没有必要的，但其对小提琴如果需要

来源

2013-06-30 UntitledGraphic

试试这种方法。

$(document).ready(function() { 
    $("li").click(function() { 
     //Toggle the child but don't include them in the hide selector using .not() 
     $('li > ul').not($(this).children("ul").toggle()).hide(); 

    }); 
});

Demo

来源

2013-06-30 07:21:28 PSL

非常感谢PSL。 – UntitledGraphic

检查此琴

http://jsfiddle.net/Kritika/SZwTg/1/

   $(document).ready(function() { 
         $("li").click(function() { 
          $('li > ul').not($(this).children("ul")).hide(); 
          $(this).children("ul").toggle(); 
          }); 
         });

或

   $(document).ready(function() { 
        $("li").click(function() { 
         var submenu=$(this).children("ul"); 
         $('li > ul').not(submenu).hide(); 
         submenu.toggle(); 
         }); 
        });

点击“父母1”后会显示其子女，当您点击“父母2”时，父母1的孩子会隐藏，父母2的孩子会显示。并且如果家长1的孩子表明您可以通过再次点击家长1来隐藏他们。

来源

2013-06-30 08:01:17 Pbk1303

这也正是我想要的，不确定哪一个最好，希望你不介意我给第一个答案给出一个大的绿色勾号，它首先出现。 – UntitledGraphic

@CraigCooper：当然。 – Pbk1303

从我+1的努力... :) – PSL

最好使用的slideToggle在肘节的地方：

$(document).ready(function() { 
$("li").click(function() { 
    $('li > ul').not($(this).children("ul")).hide(); 
    $(this).children("ul").slideToggle('slow'); 
});

}）;

来源

2015-12-22 06:54:27 Anup

下拉菜单点击切换

回答

相关问题