一鍵觸發2個動作

Question

我試圖將兩個動作分配給jQuery中的按鈕。 該按鈕應該：

1. 打開一個隱藏的div，然后...
2. 向下滾動以使該div可見。

當兩個操作都在按鈕上起作用時，它們當前需要單擊兩次。 第一次單擊時，將顯示div，但要將其滾動到視圖中，我需要再次單擊該按鈕。

有什么建議我要怎么做嗎？

jQuery的

$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
    event.preventDefault();
    $('.impr-text').hide(); // hide previous popup div
    var id = $(this).data("id"); // get the div id which to show
    $('#' + id).fadeIn(function () {  // show cuurent click link's popup
        $(this).css({
            'display': 'block'
        });
    });
    $.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});

HTML

<div id="impressum-footer">

        <div class="footer">
            <div class="inner-wrap-imp">
                <ul class="impressum-links">
                    <li><a href="#impressum-footer" class="impr-link" data-id="impr-text">Impressum</a></li>
                    <li>|</li>
                    <li><a href="#impressum-footer" class="impr-link" data-id="impr-text">Datenschutz</a></li>
                    <li class="impressum-button" ><a href="#impressum-footer" class="impr-link" data-id="impr-text"></a></li>
                </ul>
            </div>  
        </div>

        <div id="impr-text" class="impr-text">
            <div class="inner-wrap"> ...

Answer 1

您需要將scrollTo放在fadeIn完成回調處理程序中。 這樣callTo是在完成執行fadeIn ，而不是本質上，在同一時間。 當前，您似乎還在將回調函數放到另一個參數的位置（持續時間或選項對象，取決於所使用的方法簽名）。 不確定為什么要在那里進行CSS更改。

嘗試這樣的事情：

$(document).ready(function () {
    "use strict";
    $('.footer a').click(function (event) {
        event.preventDefault();
        $('.impr-text').hide(); // hide previous popup div
        var id = $(this).data("id"); // get the div id which to show
        $('#' + id).fadeIn({
            duration: 100, // or whatever duration you want to use
            complete: function() {
                $.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
            }
        });
    });
});

Answer 2

如果您要在一個按鈕上分配2種不同的操作，請將其設置為2種不同的類（或ID），可以說

<div class="action1 action2">

之后，在jQuery中您將能夠執行以下操作：

$('.action1').on('click', function (e) { console.log('#1'); ... });
$('.action2').on('click', function (e) { console.log('#2'); ... });

JsFiddle： http : //jsfiddle.net/g2wdd2cb/

Answer 3

我現在設法解決了。 @euvl解釋的方法就是一種...

在意識到它不起作用之后，我更改了代碼（滾動部分）。 現在，最終的（工作）代碼如下所示：

jQuery的：

    $(document).ready(function () {
    "use strict";
    $('.footer-action-1 a').click(function (event) {
        event.preventDefault();
        $('.impr-text').hide(); // hide previous popup div
        var id = $(this).data("id"); // get the div id which to show
        $('#' + id).fadeIn(function () {  // show cuurent click link's popup
            $(this).css({
                'display': 'block'
            });
        });
    });
});
$(document).on('click','.footer-action-2 a', function(event) {
        event.preventDefault();
        var target = "#" + this.getAttribute('data-target');
        $('html, body').animate({
            scrollTop: $(target).offset().top
            }, 2000);
});

HTML：

<div id="impressum-footer">

        <div class="footer footer-action-1 footer-action-2">
            <div class="inner-wrap-imp">
                <ul class="impressum-links">
                    <li><a href="#" class="impr-link" data-id="impr-text" data-target="impressum-footer">Impressum</a></li>
                    <li>|</li>
                    <li><a href="#" class="impr-link" data-id="impr-text" data-target="impressum-footer">Datenschutz</a></li>
                    <li class="impressum-button" ><a href="#" class="impr-link" data-id="impr-text" data-target="impressum-footer"></a></li>
                </ul>
            </div>  
        </div>

        <div id="impr-text" class="impr-text">
            <div class="inner-wrap">

現在唯一的問題是它滾動得太遠了。 一旦添加偏移量，它就會停止工作。