点击下拉菜单隐藏其他下拉列表

时间:2013-12-14 08:35:11

标签: javascript jquery html drop-down-menu

我有一个使用同位素插件的下拉数据过滤器。

我正在尝试关闭一个下拉列表,该下拉列表在单击另一个列表项时打开,并在下拉列表打开时让箭头向下旋转。

我想知道如何实现这一目标。

这是我的 jsfiddle

        function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';

    }

    $('#nfbt #nfbtv').click(function(){
        $(this).toggleClass('fbt nfv');
    });

我使用了教程中的jquery,所以如果我将它移动到自己的.js文件中,它在html本身就不起作用。

2 个答案:

答案 0 :(得分:0)

我不确定你真正想要的是什么,但这是我尝试实现目标

function toggle_visibility(e) {
    if (e.target.parentNode != this) return;
    e.preventDefault();
    $(this).toggleClass('open').siblings('.hasarrow.open').removeClass('open');
}
jQuery(function ($) {
    $('.productfilters').on('click', '.hasarrow', toggle_visibility);
});

http://jsfiddle.net/oceog/aUkku/4/

答案 1 :(得分:0)

Hi Please have a look to this link. I make it to work for your requirement.  
If you want to change the arrow then add a class which will have down arrow 
css when you  toggling it to down.

http://jsfiddle.net/aUkku/60/