-1

我正在尝试使用 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 中看到它完全影响。如果您需要任何其他信息，请告诉我。

4

2 回答 2

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

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

编辑

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

于 2012-09-17T16:04:31.550 回答
2

jsFiddle

更新于 2012 年 9 月 21 日，以反映其他一些用途，包括第二个菜单，而无需同时打开 2 个

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

$(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");
});
});

如果您想在 diff 类名的多个元素上使用：

$(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'});
        });
});
于 2012-09-17T16:01:49.413 回答