Question

所以，我使用了以下URL的根JS小提琴（761之前的部分），我得到了一个很好的设计，完全符合我的要求。这是链接：

Click here to see whole JSFiddle这里是Javascript代码：

$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        top: 49
    }, 'slow', function () {
        $('#trigger span').html('|||');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        top: -150
    }, 'slow', function () {
        $('#trigger span').html('|||');  //change the trigger text at end of animation
    });
}

但是当我在这里实现它时：http://m.bwpcommunications.com/agency.php它不起作用。

任何人都知道为什么会这样？

Answer 1

看起来你可能在加载DOM之前设置了点击处理程序。

你可以看到，通过改变你的小提琴来加载jQuery“in head”（就像你的实时网站一样），你的代码就会停止工作。 http://jsfiddle.net/tzDjA/764/

您可能需要在点击处理程序周围添加以下内容这将在DOM加载后配置您的处理程序。

$(function() {

  $('#trigger').click( function() {
    [...]
  }  

});

http://jsfiddle.net/tzDjA/762/

或者，尝试delegating处理程序，以便它将应用于稍后添加到DOM的元素。

$(document).on('click','#trigger',function() {
  [...]
});

http://jsfiddle.net/tzDjA/763/

Answer 2

您需要在此页面上加载jQuery：http://m.bwpcommunications.com/agency.php jQuery UI不等同于jQuery。

https://developers.google.com/speed/libraries/devguide#jquery

移动隐藏菜单适用于jsfiddle，但不适用于在线。任何解决方案都会有帮助。

2 个答案: