Question

我有以下代码窗口加载功能用于移动设备的菜单按钮显示，而不是完整的菜单显示。

文档就绪功能适用于全宽响应滑块。

window.onload = function() {
var nav = document.getElementById('nav'); 
var navItem = nav.getElementsByTagName('li');
//is it floated?
var floated = navItem[0].currentStyle ? el.currentStyle['float'] :  document.defaultView.getComputedStyle(navItem[0],null).getPropertyValue('float');

if (floated != 'left') {
    var collapse = document.getElementById('nav-collapse');

    //toggle class utility function
    var classToggle = function( element, tclass ) {
        var classes = element.className,
        pattern = new RegExp( tclass );
        hasClass = pattern.test( classes );
        //toggle the class
        classes = hasClass ? classes.replace( pattern, '' ) : classes + ' ' + tclass;
        element.className = classes.trim();
    };

    classToggle(nav, 'hide');
    classToggle(collapse, 'active');
    collapse.onclick = function() {
        classToggle(nav, 'hide');
        return false;
    }
}
}

$.noConflict();
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: false,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true, 
autoScaleSliderWidth: 960,     
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: false,
transitionType:'move',
globalCaption: false,
fullscreen: {
    // fullscreen options go gere
    enabled: true,
    nativeFS: true
},
autoPlay: {
    // autoplay options go gere
    enabled: true,
    pauseOnHover: true
},
deeplinking: {
  enabled: true,
  change: false
},
/* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
imgWidth: 1400,
imgHeight: 680
 });
});

Html

<nav role="navigation">
                  <a href="#nav" class="nav-collapse" ><img src="images/btn_menu.jpg" alt="menu" id="nav-collapse"></a>
                  <ul class="nav" id="nav">
                       <li class="active"><a href="index.html">Home</a></li>
                       <li><a href="services.html">Services</a></li>
                       <li><a href="compliant-reporting.html">Compliant Reporting</a></li>
                       <li><a href="setup-training.html">Setup &amp; Training</a></li>
                       <li><a href="demo-videos.html">Demo Videos</a></li>
                       <li><a href="events-calendar.html">Events Calendar</a></li>
                       <li><a href="contact-us.html">Contact Us</a></li>
                  </ul>
                  </nav>

javascript和jQuery都在同一个文件中default.js window.onload正在运行，但是滑块脚本无效。如果我删除window.onload，则滑块正在工作。

他们是冲突的。有什么帮助吗？

Answer 1

default.js是一个常见文件。它包含表单验证代码，jQuery选项卡，jQuery日期选择器等，用于其他页面。

我只将window.onload函数和document.ready函数放在一个单独的文件中并包含该文件。

现在有效！

谢谢大家。

Answer 2

从各方面来看，

window.onload与$.ready *相同，这意味着它们都可以在任何设备上执行。

如果您真的希望在移动设备而非桌面设备上运行（反之亦然），则必须使用some kind of mobile detection并执行以下操作：

if ($.browser.mobole) {
    your mobile code here
} else {
    your desktop code here
}

*专家：不，他们实际上并不相同。

jQuery Document ready函数与window onload函数冲突

2 个答案: