jQuery retract 的使用会影响其他 div 标签

Question

我正在尝试使用 jquery 显示下拉框。它运作良好。当我们在打开列表后单击页面的任何其他位置时，我还实现了隐藏下拉列表的选项。为此，我使用了以下 jQuery。

$('div.selectBox').each(function(){
    $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
    $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
    $(this).children('span.selected,span.selectArrow').click(function(){
        if($(this).parent().children('div.selectOptions').css('display') == 'none'){
            $(this).parent().children('div.selectOptions').css('display','block');
        }
        else
        {
            $(this).parent().children('div.selectOptions').css('display','none');
        }
    });
    $(document).unbind('click');
    $(document).click(function(event){
        if($(event.target).closest('div.selectBox').length == 0) {
             $('.selectOptions').hide();                
        }
    });
    $(this).find('span.selectOption').click(function(){
        $(this).parent().css('display','none');
        $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
        $(this).parent().siblings('span.selected').html($(this).html());
    });
});

当我们点击网站的任何其他部分时，它会完美关闭或隐藏。但问题是其他一些<div>标签被隐藏或 display:none;执行此操作后。

请给我一个解决方案。你可以在上面的 url 中看到它完全影响。如果您需要任何其他信息，请告诉我。

Answer 1

$(this).toggleClass('open').next().toggle();

分散在您的代码中的各个地方的这一行似乎是导致问题的原因。我不确定它最初打算完成什么。它可能需要修改或直接删除，具体取决于它的意图。

编辑

在玩了你的 jsFiddle 之后，我可以看到它的意图是切换嵌套的子元素，需要更改为 $(this).toggleClass('open'); 才能正常工作