0

このメニューを開いたり閉じたりするときに、なぜslideToggleがこのような警告フラッシュを引き起こしているのかわかりません: http://jsfiddle.net/joshnh/xr3e5/

注: Chrome と Safari でのみこれに気付いているため、Webkit の問題であると想定しています。

<!-- HTML -->

<nav class="mainNav">
    <ul>
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">About Us</a></li>
        <li><a href="javascript:void(0);">Teachers</a></li>
        <li><a href="javascript:void(0);">Students</a></li>
        <li><a href="javascript:void(0);">Activities</a></li>
        <li><a href="javascript:void(0);">Media</a></li>
        <li><a href="javascript:void(0);">Venue Hire</a></li>
        <li><a href="javascript:void(0);">Contact Us</a></li>
    </ul>
</nav>

/* CSS */

.mainNav {
    background-color: #5978cf;
    color: #fff;
    cursor: pointer;
}
.mainNav:before {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    border-bottom: 1px solid hsla(0,0%,0%,.25);
    content: '≡ Menu';
    display: block;
    font: bold 1em/3 sans-serif;
    padding-left: 1em;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.1);
}
.mainNav ul {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 .1em .25em hsla(0,0%,0%,.1);
    display: none;
    left: 0;
    text-align: left;
    top: 3em;
    -webkit-transition: .1s;
}
.mainNav a {
    color: #fff;
    border-bottom: 1px solid hsla(0,0%,0%,.1);
    border-top: 1px solid hsla(0,0%,100%,.1);
    display: block;
    font: 1em/3 sans-serif;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 0 1px 0 hsla(0,0%,0%,.1);
}
.mainNav li:first-child a {
    border-top: none;
}
.mainNav a:hover,
.mainNav a:focus {
    background-color: hsla(0,0%,100%,.1);
}

// jQuery

var $mainNav = $('.mainNav'),
    $mainNavA = $mainNav.find('a');

$mainNav.on('click', function() {
    $mainNav.children('ul').slideToggle('linear');
});

$mainNavA.on('click', function(e) {
    e.stopPropagation();
});
4

1 に答える 1

1

css プロパティ (ul の -webkit-transition) に問題があるようです。http://jsfiddle.net/davidbuzatto/xr3e5/13/をご覧ください

.mainNav ul {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 .1em .25em hsla(0,0%,0%,.1),
                inset 0 -.1em .25em hsla(0,0%,0%,.1);
    display: none;
    left: 0;
    text-align: left;
    top: 3em;
    /*-webkit-transition: .1s;*/
}
于 2012-07-25T04:19:00.063 に答える