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>

此方法获取单击的项目并找到紧随其后的box元素，然后设置该绑定。

以下是一些参考资料：

$.next()

$.find()

选择新下拉菜单时关闭jQuery下拉框/清理jquery代码

1 个答案: