Question

我使用的是一个带有2个拉出功能的简单页面，一个位于左侧，另一个位于右侧。当我点击另一个时，我想将这两个函数简化或组合成一个并使一个拉出关闭，这样一次只能看到一个。

的Javascript

<script type="text/javascript">
$(document).ready(function () {
    $("#clickme").click(function () {
        if($(this).parent().hasClass("popped")){
        $(this).parent().animate({left:'-750px'}, {queue: false, duration: 400}).removeClass("popped");
        $(".overlay").fadeOut(500);
    }else {
        $(this).parent().animate({left: "0px" }, {queue: false, duration: 400}).addClass("popped");
        $(".overlay").fadeIn(500);
        }
    });

    $(".overlay").click(function(){
        $("#clickme").click();
    });


    $("#clickme2").click(function () {
        if($(this).parent().hasClass("popped")){
        $(this).parent().animate({right:'-750px'}, {queue: false, duration: 400}).removeClass("popped");
        $(".overlay2").fadeOut(500);
    }else {
        $(this).parent().animate({right: "0px" }, {queue: false, duration: 400}).addClass("popped");
        $(".overlay2").fadeIn(500);
        }
    });

    $(".overlay2").click(function(){
        $("#clickme2").click();
    });

});

CSS

#slideout, #slideout2 {
    background: #f4f4f4;
    position: fixed;
    width: 750px;
    height: auto;
    top: 20%;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index:9999;
}

#slideout {
    left:-750px;
}

#slideout2 {
    top: 40%;
    right: -750px;
} 

#clickme, #clickme2 {
    position: absolute;
    top: 0;
    height: 102px;
    width: 184px;
    background: url(../../assets/images/pullout.png) top left no-repeat;
    cursor: pointer;
     -webkit-transition: all 0.2s 1s ease-in-out;
    -moz-transition: all 0.2s 1s ease-in-out;
    -o-transition: all 0.2s 1s ease-in-out;
    transition: all 0.2s 1s ease-in-out;

}

#clickme {
    right: -184px;
}

#clickme2 {
    background: url(../../assets/images/pullout2.png) top left no-repeat;
    left: -184px;
}

#slidecontent, #slidecontent2 {
    float: left;
    font-size: 15px;
    line-height: 28px;
    padding: 25px;
}

#slidecontent p, #slidecontent2 p {
    padding: 0 10px;
}


#slideout.popped, #slideout2.popped {
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.6);
    box-shadow: 0 0 15px 0 rgba(0,0,0,.6);
}

#slideout.popped #clickme, #slideout2.popped #clickme2 {
    background-position: 0 -103px;
}

.overlay, .overlay2 {
    display:none;
    bottom: 0;
    left: 0;
    opacity: 0.65;
    filter: alpha(opacity = 65); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
    background-color: #000;
    cursor:pointer;

}

HTML

<!-- Gutschein Pullout Start 1 -->
<div class="overlay"> &nbsp;</div>

<div id="slideout">
    <div id="slidecontent">
        <a href="assets/images/Lenz_Massivholz_Gewinn-Karte_15-04_WEB.pdf" target="_blank">
            <img src="assets/images/Lenz_Massivholz_Gewinn-Karte_15-04_WEB.jpg" width="600" height="426" alt="Jetzt Teilnahmekarte anklicken, ausdrucken und ausfüllen">
        </a>
        <p style="margin:5px 0 15px;">Einfach auf die Teilnahmekarte klicken und die Grafik ausdrucken und ausfülen. Anschließend beim nächsten Einkauf bei <b>Möbel Lenz</b> abgeben und mit etwas Glück gewinnen.</p>
        <p style="font-size: 12px; font-style:italic;">*  Nur eine Teilnahmekarte pro Person einlösbar.</p>
    </div>
    <div id="clickme"></div>
</div>
<!-- Gutschein Pullout Ende 1 -->

<!-- Gutschein Pullout Start 2 -->
<div class="overlay2"> &nbsp;</div>

<div id="slideout2">
    <div id="slidecontent2">
        <a href="assets/images/Lenz_Massivholz_GUT-Blume_15-04_WEB.pdf" target="_blank">
            <img src="assets/images/Lenz_Massivholz_GUT-Blume_15-04_WEB.jpg" width="600" height="300" alt="Jetzt Gutschein anklicken und ausdrucken">
        </a>
        <p style="margin:5px 0 15px;">Einfach auf den Gutschein klicken und die Grafik ausdrucken, oder herunterladen. Anschließend beim nächsten Einkauf bei <b>Möbel Lenz</b> vorzeigen einen Frühlingsblüher mitnehmen.</p>
        <p style="font-size: 12px; font-style:italic;">*  Nur ein Gutschein pro Person einlösbar.</p>
    </div>
    <div id="clickme2"></div>
</div>
<!-- Gutschein Pullout Ende 2 -->

您可以在此处查看实时版本： http://lenz.eprospekt.info

Answer 1

而不是使用id的使用类。 #clickme1和#clickme2只需使用课程.clickme。在jQuery选择器中将id替换为.clickme。然后摆脱第二个功能。

编辑：保留ID用于样式目的。

<强>的JavaScript / jQuery的

$(".clickme").click(function () {
    if($(this).parent().hasClass("popped")){
        $(this).parent().animate({left:'-750px'}, {queue: false, duration: 400}).removeClass("popped");
        $(".overlay").fadeOut(500);
    }else {
        $(this).parent().animate({left: "0px" }, {queue: false, duration: 400}).addClass("popped");
          $(".overlay").fadeIn(500);
        }
});

<强> HTML

<!-- Gutschein Pullout Start 1 -->
<div class="overlay"> &nbsp;</div>

<div id="slideout">
    <div id="slidecontent">
        <a href="assets/images/Lenz_Massivholz_Gewinn-Karte_15-04_WEB.pdf" target="_blank">
            <img src="assets/images/Lenz_Massivholz_Gewinn-Karte_15-04_WEB.jpg" width="600" height="426" alt="Jetzt Teilnahmekarte anklicken, ausdrucken und ausfüllen">
        </a>
        <p style="margin:5px 0 15px;">Einfach auf die Teilnahmekarte klicken und die Grafik ausdrucken und ausfülen. Anschließend beim nächsten Einkauf bei <b>Möbel Lenz</b> abgeben und mit etwas Glück gewinnen.</p>
        <p style="font-size: 12px; font-style:italic;">*  Nur eine Teilnahmekarte pro Person einlösbar.</p>
    </div>
    <div id="clickme1" class="clickme"></div>
</div>
<!-- Gutschein Pullout Ende 1 -->

<!-- Gutschein Pullout Start 2 -->
<div class="overlay2"> &nbsp;</div>

<div id="slideout2">
    <div id="slidecontent2">
        <a href="assets/images/Lenz_Massivholz_GUT-Blume_15-04_WEB.pdf" target="_blank">
            <img src="assets/images/Lenz_Massivholz_GUT-Blume_15-04_WEB.jpg" width="600" height="300" alt="Jetzt Gutschein anklicken und ausdrucken">
        </a>
        <p style="margin:5px 0 15px;">Einfach auf den Gutschein klicken und die Grafik ausdrucken, oder herunterladen. Anschließend beim nächsten Einkauf bei <b>Möbel Lenz</b> vorzeigen einen Frühlingsblüher mitnehmen.</p>
        <p style="font-size: 12px; font-style:italic;">*  Nur ein Gutschein pro Person einlösbar.</p>
    </div>
    <div id="clickme2" class="clickme"></div>
</div>
<!-- Gutschein Pullout Ende 2 -->

如何简化或组合2个jquery拉出函数

1 个答案: