jQuery收回使用会影响其他div标记

我正在尝试使用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());
    });
});

当我们点击网站的任何其他部分时，它会完全关闭或隐藏。但是问题是一些其他的

标签被隐藏或

显示：无执行此操作后

请给我一个解决办法。您可以在上面的url中看到它完全起作用。如果您需要任何其他信息，请告诉我。

长话短说，我不包括您所有的其他工作，但对于您想要的基本功能，您需要的只是以下内容：

$(function() {
    // This will ensure it closes when clicked anywhere not on the element or its children
    $(document).click(function(e) {
        $(".open").removeClass("open");
    });

// the simple task of adding class
$(".createNew, .username, .notes").click(function(e) {
    var $this = $(this);
    // This next line ensures not having 2 open at once
    $(".open").filter(function(i){ return $this[0] != $(this)[0]; }).removeClass("open");
    e.stopPropagation(); // this prevents it closing via document.click
    $this.toggleClass("open");
});
});

如果要在dif类名的多个元素上使用：

$(function() {
    $(document).click(function(e) {
        $(".createNew, .username, .notes").removeClass("open");
    });

    // the simple task of adding class
    $(".createNew, .username, .notes").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });

    // the rest
    $(".textbox").css({width:'100px', height: '33px'})
        .focus(function(e) {
            $(this).animate({width: '200px', height: '33px'});
        })
        .blur(function(e) {
            $(this).animate({width: '100px', height: '33px'});
        });
});

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

编辑

在玩了JSFIDLE之后，我可以看到它的意图是切换嵌套的子元素，需要更改为
$（this）.toggleClass（'open'）要正常工作
您可以在JSFIDLE/jsbin上放置一个最小（非工作）的示例吗？它可能是具有相同类名的东西。然而，我无法找出代码中的类名和网站上的类名之间的联系。你可以看到，当我们点击新建按钮时，搜索框消失了！！！问题是.next（）.toggle（）切换下一个（同级）元素的显示，在您的示例中，它恰好是createNew之后的元素-搜索框或日期选择器。我已经更新了JSFIDLE页面。请检查：顶部用户名下拉列表会打开一段时间并自动关闭。下拉菜单超链接不起作用。我想它会在没有链接到超链接的情况下关闭列表！！！！任何解决方案？在您的示例中，您缺少createNew下拉列表的开头。@Narretz不，我不是，在他的小提琴中，open是通过css控制的，因此只需要添加类，正如您在这里看到的那样，您是正确的，抱歉。这是一种有趣的方式，尽管我会将其归档在“非直观”下：）（我知道那是99tharun，不是你）我只是简单地告诉你那里有什么，没有理由混淆已经困惑的：PI尝试了代码。它在
createNew
类中运行良好。但不适用于
用户名
。菜单没有打开。当我们连续多次单击时，我们可以看到它在几秒钟内打开。
$(this).toggleClass('open').next().toggle();