其他打開時關閉div jquery

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> 

現在您可以隨時通過隱藏下拉菜單[這個隱藏所有這些比賽下拉類名，所以要小心這個名稱不應該在任何地方使用的類。元素]

你的情況

該代碼會在

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中，您可以爲每個下拉菜單添加一個類。然後，您可以使用該類來篩選兄弟姐妹。例如：

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