在点击下拉菜单中隐藏其他下拉菜单

Question

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

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

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

这是我的 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本身中不起作用。

Answer 1

我不确定您真正想要的是什么，但这是我努力实现目标的尝试

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/

Answer 2

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/