选择新下拉列表时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 等于您拥有的下拉列表数量的情况下做到这一点。

编辑：

我应该注意，除非 CSS 保持不变，否则使用 dropbox1 和 box1 并不是一个很好的编程习惯。我最好设置一个类并这样做：

$('.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()