当新的下拉选择/清理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()