當新的下拉選擇/清理jQuery下拉框關閉jquery代碼

Question

我已經包含了我想解決的問題的圖像，以及下面的所有代碼。
我對代碼本身下發布的代碼有問題（不在腳本框中）。
任何幫助將不勝感激。

的HTML腳本

<section id="s-explore"> 
    <div class="pagebreak"> 
     <span>The Lifestyle</span> 
     <i class="down">&lt;</i> 
    </div> 
    <!-- Layout for Columns --> 
    <div class="wrapper layout"> 
     <!-- Column Home 1 --> 
     <div class="col"> 
      <div class="media"> 
       <img id="d1" src="images/main.png" width="318" height="269" alt="" /> 
       <div class="contenthover"> 
        <h3>Lorem ipsum dolor</h3> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p> 
        <p><a href="#" id="dropbox1" class="mybutton">Lorem ipsum</a></p> 
       </div> 
       <div class="body"> 
        <h1></h1> 
        <h2><br /></h2> 
       </div> 
      </div> 
     </div> 
     <!-- Column Home 2 --> 
     <div class="col"> 
      <div class="media"> 
       <img id="d1" src="images/red.png" width="318" height="269" alt="" /> 
       <div class="contenthover"> 
        <h3>Lorem ipsum dolor</h3> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p> 
        <p><a href="#" id="dropbox2" class="mybutton">Lorem ipsum</a></p> 
       </div> 
      </div> 
      <div class="body"> 
       <h1><a href="#"></a></h1> 
       <h2><br></h2> 
      </div> 
     </div> 
     <!-- Column Home 3 --> 
     <div class="col"> 
      <div class="media"> 
       <img id="d1" src="images/car.png" width="318" height="269" alt="" /> 
       <div class="contenthover"> 
        <h3>Lorem ipsum dolor</h3> 

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p> 
        <p><a href="#" id="dropbox3" class="mybutton">Lorem ipsum</a></p> 
       </div> 
      </div> 
      <div class="body"> 
       <h1><a href="news.html"></a></h1> 
       <h2><br></h2> 
      </div> 
     </div> 
    </div> 
    <div id="box1"> 
     <a href="#" class="close">[x]</a> 
     <p>This is test box number one</p> 
    </div> 
    <div id="box2"> 
     <a href="#" class="close">[x]</a> 
     <p>This is test box number two</p> 
    </div> 
    <div id="box3"> 
     <a href="#" class="close">[x]</a> 
     <p>This is test box number three</p> 
    </div> 
</section> 

這是jQuery腳本

<!-- js hover over image -->  

<script> 
    $(function(){ 
     $(' #d1').contenthover({ 
      overlay_width:300, 
      overlay_height:150, 
      effect:'slide', 
      slide_direction:'bottom', 
      overlay_x_position:'center', 
      overlay_y_position:'bottom', 
      overlay_background:'#000', 
      overlay_opacity:0.8 
     }); 
    }); 
</script> 

<!-- js for drop down box1 --> 
<script> 
    $(function() { 
     $("#dropbox1").click(function (event) { 
      event.preventDefault(); 
      $("#box1").slideToggle(); 
     }); 
     $("#box1 a").click(function (event) { 
      event.preventDefault(); 
      $("#box1").slideUp(); 
     }); 
    }); 
</script> 

<!-- js for drop down box2 -->  
<script> 
    $(function() { 
     $("#dropbox2").click(function (event) { 
      event.preventDefault(); 
      $("#box2").slideToggle(); 
     }); 

     $("#box2 a").click(function (event) { 
      event.preventDefault(); 
      $("#box2").slideUp(); 
     }); 
    }); 
</script> 

<!-- js for drop down box3 --> 
<script> 
    $(function() { 
     $("#dropbox3").click(function (event) { 
      event.preventDefault(); 
      $("#box3").slideToggle(); 
     }); 

     $("#box3 a").click(function (event) { 
      event.preventDefault(); 
      $("#box3").slideUp(); 
     }); 
    }); 
</script> 

反正有沒有收拾這個jQuery的代碼，這樣我就不必有單獨的腳本每個下拉框？

嗯，我想，我不允許的，因爲我沒有在這裏足夠高的代表尚未發佈的圖像，但也許有一天生病能夠:)

現在，如果你選擇所有三個下拉區他們只是一個接一個地出現，如果選擇了其中一個下拉框，然後用戶移動到任何其他按鈕上，第一個下拉鍵將關閉第二個按鈕，然後打開新框。

這是CSS腳本

section .wrapper { 
    position: relative; 
    zoom: 1; 
} 
section .wrapper:after { 
    display: block; 
    visibility: hidden; 
    height: 0; 
    clear: both; 
    content: "."; 
} 
section .wrapper.layout { 
    width: 960px; 
    margin: 0 auto; 
    padding: 95px 90px; 
} 
section .wrapper .fg { 
    z-index: 200; 
} 
section .pagebreak { 
    position: absolute; 
    top: 0; 
    left: 120px; 
    line-height: 1; 
    text-transform: uppercase; 
    color: #272727; 
    display: inline-block; 
    z-index: 300; 
    zoom: 1; 
} 
section .pagebreak:after { 
    display: block; 
    visibility: hidden; 
    height: 0; 
    clear: both; 
    content: "."; 
} 
section .pagebreak span { 
    padding: 14px 14px 14px 0; 
    display: block; 
    float: left; 
} 
section .pagebreak i { 
    width: 16px; 
    padding: 14px 14px 8px; 
    display: block; 
    float: left; 
    border-left: 1px dotted #272727; 
    font-style: normal; 
    font-family: 'dinliga-medium'; 
} 
#s-explore { 
    background: #fff; 
} 
#s-explore .wrapper .col { 
    float: left; 
    width: 318px; 
    height: 269px; 
    background: #000; 
    margin-right: 2px; 
    cursor: pointer; 
    position: relative; 
} 
#s-explore .wrapper .col .media { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 318px; 
    height: 269px; 
} 
#s-explore .wrapper .col .body { 
    padding: 20px 0; 
    position: absolute; 
    top: 477px; 
    left: 0px; 
    width: 100%; 
} 
#s-explore .wrapper .col .body.hover { 
    top: 150px; 
} 
#s-explore .wrapper .col h1, 
#s-explore .wrapper .col h2 { 
    font-weight: normal; 
    text-transform: uppercase; 
    text-align: center; 
} 
#s-explore .wrapper .col h1 a:hover, 
#s-explore .wrapper .col h2 a:hover { 
    ![issue with the drop down][1] text-decoration: none; 
} 

Answer 1

基本上要遍歷您的元素，並設置綁定事件。

var elementCount = 5; 
for(var i = 0; i < elementCount; i++){ 
    $("#dropbox" + i).bind('click', function (event) { 
     event.preventDefault(); 
     $("#box" + i).slideToggle(); 
    }); 

    $("#box" + i + " a").bind('click', function (event) { 
     event.preventDefault(); 
     $("#box" + i).slideUp(); 
    }); 
} 

應該這樣做，其中elementCount中等於你然而，許多下拉菜單。

編輯：

我要指出，這是不是一個很好的編程習慣有dropbox1和BOX1除非CSS保持不變。我會更好地設置一個類，並做到這一點：

$('.class').bind('click', function(){ 
    preventDefault(); 
    var box = $(this).next('.box'); 
    box.slideToggle(); 
    box.find('a').bind('click', function(){ 
     preventDefault(); 
     box.slideUp(); 
    }); 
}); 

現在你的HTML需要一些輕微的修改，但。

<div class="class"></div> 
<div class="box"> 
    <a href="#">Text</a> 
</div> 

此方法採用被點擊該項目，並發現緊接在後面的盒元件，然後設置一個結合。

這裏有你一些參考：

$.next()

$.find()