Question

我希望有人可以帮我解决这个问题 - 我的设计目前有一个抽屉，它使用JQuery动画功能在用户点击标签时打开和关闭。我想创建一个执行相同功能的附加按钮（只是打开和关闭同一个抽屉的另一种方法）。

我当前的按钮是＃handler_bottom，带有以下JQuery：

   $(document).ready(function() {

        var h_bt = 0; //variable to keep track of the div#bottom condition.

        $('a#handler_bottom').on('click', function(event) {

            event.preventDefault();

            if (h_bt == 0) {

                $(this).parent().animate({
                    top: '380px'
                }, 300);
                $(this).css({
                    'background-color': '#abadb4'
                });

                h_bt = 1;
            } else {

                $(this).parent().animate({
                    top: '560px'
                }, 300);
                $(this).css({
                    'background-color': '#abadb4'
                });

                h_bt = 0;
            }
        });

我已经包含了一个小提琴，以更好地展示我想要实现的目标My Fiddle。我想用蓝色圆圈（#btntwo）作为额外的按钮打开底部抽屉。

Answer 1

$("div#btntwo").on('click', function(event){ $("a#handler_bottom").click()});

Answer 2

将您的点击处理程序分开，以便您可以重复使用它。

$('a#handler_bottom').on('click', openDrawer)
$('#btntwo').on('click', openDrawer)

function openDrawer(event) {
  event.preventDefault();

  var drawer = $('#todo');

  if (h_bt == 0) {

    drawer.animate({
      top: '380px'
    }, 300);
    $(this).css({
      'background-color': '#abadb4'
    });

    h_bt = 1;
  } else {

    drawer.animate({
      top: '560px'
    }, 300);
    $(this).css({
      'background-color': '#abadb4'
    });

      h_bt = 0;
  }
}

请注意，我还将$(this).parent()的引用更改为抽屉本身。上下文将根据触发click事件的内容而改变。

创建两个具有相同功能的按钮 - 打开抽屉div

2 个答案: