Question

我不擅长JavaScript / jQuery。我有代码打开下拉列表。我想添加代码，以便在打开一个下拉列表时，其他下拉列表会自动关闭。

这是脚本代码：

var s;
ShowHideWidget = {

    settings : {
       clickHere : document.getElementById('clickHere'),
       dropdown_login : document.getElementById('dropdown_login')
    },

    init : function() {
        //kick things off
        s = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        ShowHideWidget.addEvent(s.clickHere, 'click', function() {    
            ShowHideWidget.toggleVisibility(s.dropdown_login);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
            return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        $(id).animate({
            left: "",
            height: "toggle"
        }, 500, function() {
        });
    }
};

(function() {
    ShowHideWidget.init();
})();

/*Script 2*/

var k;
ShowHideWidget = {

    settings : {
       clickHere2 : document.getElementById('clickHere2'),
       dropdown_signup : document.getElementById('dropdown_signup')
    },

    init : function() {
        //kick things off
        k = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        ShowHideWidget.addEvent(k.clickHere2, 'click', function() {    
            ShowHideWidget.toggleVisibility(k.dropdown_signup);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
            return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        $(id).animate({
            left: "",
            height: "toggle"
        }, 500, function() {
        });
    }
};

(function() {
    ShowHideWidget.init();
})();

这是HTML代码：

<div id="clickHere" class="login_area">Sign up</div>
<div id="clickHere2" class="login_area">Login</div>

<div id="dropdown_login">
    <div class="dropdown_login_header">
        <div class="beeper_login"></div>
    </div>
    Hello World 111
</div>

<div id="dropdown_signup">
    <div class="dropdown_signup_header">
        <div class="beeper_value"></div>
        <div class="beeper_signup"></div>
    </div>
    Hello World 2222
</div>

Answer 1

在下拉列表中添加一个类div在jquery中识别它们（例如下拉列表）

        <div id="dropdown_login" class="drop-down">
            <div class="dropdown_login_header">
                <div class="beeper_login"></div>
            </div>
            Hello World 111
        </div>

        <div id="dropdown_signup"  class="drop-down">
            <div class="dropdown_signup_header">
                <div class="beeper_value"></div>
                <div class="beeper_signup"></div>
            </div>
            Hello World 2222
        </div>

现在你可以随时隐藏下拉列表$('.drop-down').hide() [这会隐藏所有匹配下拉列表名称的元素，所以要注意这个名称不应该在任何地方用于类。]

在您的情况下，此代码将出现

toggleVisibility : function(id) {

     $('.drop-down').hide();

    $(id).animate({
    left: "",
    height: "toggle"
  }, 500, function() {

Answer 2

你可以将下拉包装在一个额外的div中，如下所示：

<div id="clickHere" class="login_area">Sign up</div>
<div id="clickHere2" class="login_area">Login</div>

<div>
    <div id="dropdown_login">
        <div class="dropdown_login_header">
            <div class="beeper_login"></div>
        </div>
        Hello World 111
    </div>

    <div id="dropdown_signup">
        <div class="dropdown_signup_header">
            <div class="beeper_value"></div>
            <div class="beeper_signup"></div>
        </div>
        Hello World 2222
    </div>
</div>

然后你可以使用siblings()方法。

toggleVisibility : function(id) {
    $(id)
        .siblings().hide()
        .end()
        .animate({
            left: "",
            height: "toggle"
        }, 500, function() {
        });
}

不是将下拉包装在额外的div中，而是可以为每个下拉div添加一个类。然后，您可以使用该类来过滤兄弟姐妹。例如：

$(id).siblings('.drop-down').hide();

当其他人打开Jquery时关闭一个div

2 个答案: