Question

我有一个名为flyout的功能，它会在点击按钮时滑动菜单div，然后再点击一次。

问题1：它在Chrome，FF等运行正常，但IE9告诉我flyout is undefined，虽然该功能仍然有效。

问题2：在IE8中没有错误消息，但只需点击一下即可滑入和退出菜单。

我不确定，但我希望这两个问题都是相关的。我对Jquery和Jquery UI相当新，所以我不确定我是否正确使用了所有内容。任何帮助都将非常感激。

外部javascript文件中的

JS：

$(function flyout() {
    $(".btn-toggle").click(function (e) {
        var newSelector = $('#flyout-' + $(this).attr('id')),
            toggle = newSelector.css('display') == 'block';

        e.preventDefault();
        newSelector.toggle('slide', { direction: 'right' }, 300);
        $('.hide').not(newSelector).hide('slide', { direction: 'right' }, 300);

        if (!toggle) {
            newSelector.children('.l-menu').effect('highlight', 1000);
            $('a.btn-toggle i').removeClass('icon-chevron-right');
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        } else {
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        };
    });
});

HTML和JS：

<a href="#" id="fo2" class="btn btn-small btn-info btn-toggle"><i class="icon-chevron-left"></i> <i class="icon-thumbs-up"></i> Helpful Hints</a>
<a href="#" id="fo1" class="btn btn-small btn-amber btn-toggle"><i class="icon-chevron-left"></i> <i class="icon-tasks"></i> Progress</a>

<div id="flyout-fo2" class="fixed-tr hide">
    ...Menu HTML
</div>
<div id="flyout-fo1" class="fixed-tr2 hide">
    ...Menu HTML
</div>

<script type='text/javascript' language='javascript'>
    $(document).ready(function () {
        flyout();
    });
</script>

Answer 1

您正在创建函数的jQuery对象。为什么呢？

将外部文件更改为：

function flyout() {
    $(".btn-toggle").click(function (e) {
        var newSelector = $('#flyout-' + $(this).attr('id')),
            toggle = newSelector.css('display') == 'block';

        e.preventDefault();
        newSelector.toggle('slide', { direction: 'right' }, 300);
        $('.hide').not(newSelector).hide('slide', { direction: 'right' }, 300);

        if (!toggle) {
            newSelector.children('.l-menu').effect('highlight', 1000);
            $('a.btn-toggle i').removeClass('icon-chevron-right');
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        } else {
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        };
    });
}

Answer 2

您实际上是在DOM ready回调中添加了两个事件处理程序。

第一个

$(document).ready(function () {
    flyout();
});

然后是第二次

$(function flyout() {

$(function)是$(document).ready(function(){});的快捷方式。

解决方案是单独声明function flyout(){}。然后做

$(flyout);

Jquery IE外部自定义函数未定义

2 个答案: