显示隐藏子菜单onclick - JQuery

时间:2015-04-22 15:53:26

标签: jquery html css menu submenu

我喜欢JRulle的优秀代码:

http://jsfiddle.net/jrulle/23kfnbx7/3/

任何人都可以解释我如何使用完整的父链接而不是图像来打开子菜单吗? 并且只有一个子菜单同时出现?

我试图意识到这一点,但我得到的只是 - 单击链接

显示子菜单

但箭头没有变化。

    $('li.parent').on("click",function(){
       $(this).children('a').siblings('ul.children').slideToggle();
    });

对于错误拼写的内容感到抱歉,非常感谢您的帮助和来自德国的问候。

1 个答案:

答案 0 :(得分:2)

您还需要将click事件绑定到链接。所以,请改变这个

$('li.parent').on("click",

到这个

$('.parent img, .parent a').on("click",

以下是演示:https://jsfiddle.net/23kfnbx7/8/

    $('.parent img, .parent a').on("click", function () {
        var img = $(this);
        if ($(this).next('img').length) {
            var img = $(this).next('img');
        }
        if (img.hasClass('open')) {
            img.removeClass('open');            
            img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png');            
        } else {
            img.addClass('open');
            img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png');
        }
       img.siblings('ul.children').toggle();
    });