Javascript 单击时显示，再次单击时隐藏

如何绑定相同的函数但给出不同的参数

我正在制作一个下拉菜单，当家长再次单击时，我试图隐藏子菜单（参见下文）

当单击然后显示子菜单，然后再次单击并且子菜单已显示时，则隐藏它。o

目前为止我正在尝试的内容（请参阅下文）

jquery

$( ".has_sub" ).bind({
    click: function() { //when click and sub is not displayed yet
        $(this).find('.sub').slideDown();
    }, click: function() { //when click and sub is displayed already
        $(this).find('.sub').hide();
    }
});

html

子菜单1
子菜单2

在您的情况下，由于您使用了相同的键两次，因此对象将只有一个属性的值作为最后一项的值，因此只有一个处理程序（隐藏的处理程序）将被注册

由于要使用幻灯片动画切换显示，因此可以使用

$（“.has_sub”）。在（'click'，function（）上{
$（this.find（'.sub'）.stop（）.slideToggle（）；
});




子菜单1
子菜单2


这是我自己博客的代码。希望，你想要一个类似的：

$('#first').on('click', function() {
    $(this).children().toggleClass('active');
    $('#second').toggleClass('active');
});

然后在CSS中，您只需使用
左边距：-300px或使用css3
转换：翻译

这是

$（“.has_sub”）。在（'click'，function（）上{
var$sub=$（this.find（'.sub'）；
如果（$sub.is（“：可见”））{
$sub.hide（）；
}否则{
$sub.slideDown（）；
}
});
.sub{
显示：无；
}




子菜单1
子菜单2


这里有一些很好的答案，但如果您想让菜单保持打开状态，直到再次单击菜单链接，这将完全做到这一点


$（“.has_sub>a”）。单击（函数（）{
$（this）.next（'.sub'）.toggle（'slow'）；
});
.sub{display:none；}




子菜单1
子菜单2




子菜单1
子菜单2


除了滑动切换之外还有其他选择吗？@CodeDemon您可以检查元素是否可见，如果是，则隐藏它，否则显示它为什么使用
.bind（）
而不是
.on（）
？我尝试了：隐藏和：可见，但遗憾的是它们都不起作用@j08691@CodeDemon为什么不能使用SlideToggle您尝试过使用
.toggle（）
而不是
.hide（）
您可以控制切换速度
.toggle（'fast'）
或
.toggle（'slow'）
关于
$（“.has_-sub”）。单击（函数（）{$（this）。查找（'sub'）。toggle（）；}）
？如果我在（'click'…
？@CodeDemon）上使用
中的
切换类
来解决它，将非常有用。您可以根据需要更改
css
！这是建议
$('#first').on('click', function() {
    $(this).children().toggleClass('active');
    $('#second').toggleClass('active');
});