下拉菜单与点击切换 [英] Drop down menu with on click toggle

问题描述

我正在尝试创建一个下拉菜单，它可以在点击而不是悬停上激活。到目前为止，我有一个点击工作与一点JavaScript，但是虽然子菜单显示很好，如果另一个菜单被点击其他子菜单隐藏，我无法解决如何隐藏子菜单，如果其父点击。在这个 JS小提琴中的p>

EG我可以点击父母1揭示其孩子，当我点击父母2父母1的孩子隐藏和父母2的孩子们的表演。但是，如果父母1的孩子们显示，我希望能够再次单击父母1（或更好地在孩子以外的任何地方）隐藏他们。

其中每个父级和子菜单被赋予单独的类或ids。我想避免，因为它需要工作在一个cms。

这是基本代码我有

HTML：

 < div> 
< ul> 
< li>< a href =＃>父1< / a> 
< ul> 
< li>< a href =＃>父1& raquo;儿童1< / a>< / li> 
< li>< a href =＃>父1& raquo;儿童1< / a>< / li> 
< li>< a href =＃>父1& raquo;儿童1< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>父2< / a> 
< ul> 
< li>< a href =＃>父母2& raquo;儿童2< / a>< / li> 
< li>< a href =＃>父母2& raquo;儿童2< / a>< / li> 
< li>< a href =＃>父母2& raquo;儿童2< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>父3< / a> 
< ul> 
< li>< a href =＃>父3& raquo;儿童3< / a>< / li> 
< li>< a href =＃>父3& raquo;儿童3< / a>< / li> 
< li>< a href =＃>父3& raquo;儿童3< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
  

javascript：

  $（document）.ready（function（）{
 $（li）。click（function（）{
 $（'li> ul'）。hide（）; 
 $（this）.children（ul）。toggle（）; 
}）; 
}） ; 
  

CSS可能不是必需的，但如果需要，它可以在小提琴上

解决方案

尝试这样。

  $（document）。 ready（function（）{
 $（li）。click（function（）{
 //切换子代，但不要将它们包含在隐藏选择器中使用.not（）
 $（'li> ul'）。not（$（this）.children（ul）。toggle（））。hide（）; 
 
}）; 
} ）; 
  

演示

I am attempting to create a drop down menu which activates on click rather than on hover. So far I have the on click working with a little javascript, but whilst the sub menus show well and if another menu is clicked other submenus hide, I can't work out how to hide a sub menu if its parent is clicked.

EG in this JS fiddle I can click on "parent 1" to reveal its children and when I click on "parent 2" parent 1's children hide and Parent 2's children show. But if Parent 1's children show I want to be able to hide them by clicking on Parent 1 again, (or even better anywhere outside the children)

I have seen examples working where each parent and sub menu is given individual classes or ids. I want to avoid that as it needs to work in a cms.

Here's the basic code I have

The 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>

The javascript:

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

CSS is probably not necessary, but its on the fiddle if needed

解决方案

Try this way.

$(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

这篇关于下拉菜单与点击切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！