0

我有一个名为 的函数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>
4

2 回答 2

0

您正在制作一个函数的 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');
        };
    });
}
于 2013-03-12T20:16:23.980 回答
0

您实际上是在向 DOM 就绪回调添加两个事件处理程序。

首先

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

然后其次

$(function flyout() {

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

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

$(flyout);
于 2013-03-12T20:21:24.760 回答