只需单击一个按钮即可触发 2 个动作

Fire 2 actions with ONE click on a button

本文关键字：一个 单击 按钮      更新时间：2023-09-26

我正在尝试为jQuery中的按钮分配两个操作。该按钮应该：

  1. 打开一个隐藏的div，然后...
  2. 向下滚动以查看所述div。

虽然这两个操作都在按钮上工作，但它们目前需要单击2次。第一次单击时会出现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"> ...
您需要

将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'} );
            }
        });
    });
});

如果要在一个按钮上分配 2 个不同的操作，请将其设置为 2 个不同的类（或 ID），假设

<div class="action1 action2">

之后，在jQuery中，您将能够执行以下操作：

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

小提琴：http://jsfiddle.net/g2wdd2cb/

我现在已经设法让它开始了。@euvl解释的方法就是一个...

在我意识到它不起作用后，我更改了我的代码（滚动部分）。最终（工作）代码现在如下所示：

j查询： 

    $(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">

现在唯一的问题是它滚动得有点太远了。当我添加偏移量时，它停止工作。

相关文章：