0

jquery 関数のロジックを調整するのに助けが必要です。関数の仕組みは次のとおりです。

メイン ナビゲーションとサブ ナビゲーションの 2 つのナビゲーションがあり、どちらもページの読み込み時に表示されます。ウィンドウが 375px を超えてスクロールされると (サブナビゲーションが表示されなくなるため)、ナビゲーションにホバー効果があり、サブナビゲーション div が下にスライドして固定位置に変更されます。そのナビゲーションにカーソルを合わせるかクリックすると、上にスライドします。375px より下までスクロールすると、別のナビゲーションが再び表示されます。

私の問題は、375px 未満でドキュメントをクリックすると、サブナビゲーション要素が上にスライドし、ウィンドウがスクロールし、div の位置が再び変化することです。スライドとスライドのぎくしゃくしたサイクルが発生します。位置が変わります。

基本的に、クリックイベントのバインドを解除する必要がありますが、そうするのに問題があります...

バインドを解除する必要がある関数は次のとおりです。

headerClickOff()

完全なjQueryは次のとおりです。

$(window).scroll(function() {
    var scrolledpx = parseInt($(window).scrollTop());  
    if (scrolledpx < 375) {
        $('#nav ul, #header').unbind('mouseenter mouseleave');
        $(document).unbind('clicl');
        $('#header').addClass('showNav');
    } else {
        $('#header').removeClass('showNav');

        $('#nav ul').hover(function () {
            $('#header').slideDown({
                duration: 650, 
                easing: 'easeOutExpo'               
            }).css({
                'position' : 'fixed',
                'top' : '0px'
            });

        function headerClickOff() {
            $(document).click(function() {
                $('#header:visible').slideUp({
                    duration: 550, 
                    easing: 'easeOutExpo'
                });
            });
        }

        headerClickOff();

        $('#header').click(function( event ) {
            event.stopPropagation();
        });
        }, function () {
            $('#header').hover(function () {

            }, function () {
                $('#header').slideUp({
                    duration: 550, 
                    easing: 'easeOutExpo'
                });
            });
        });
    }
});

およびCSS:

#headerContainer {
    width: 960px;
    position: relative;
    z-index: 900;
    }

#header {
    position: relative;
    width: 940px;
    background: #fff;
    padding: 74px 0 20px 20px;
    z-index: 1000;
    box-shadow: 0px 0px 13px #c3c1bd;
    -moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
    -webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
    }

#nav {
    width: 100%;
    height: 49px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    }

#nav ul {
    height: 49px;
    width: 920px;
    display: block;
    }

#nav ul li {
    height: 32px;
    list-style: none;
    display: block;
    float: left;
    background: #000;
    border-left: 1px solid #fff;
    font-family: "Fette";
    letter-spacing: 1px;
    text-transform: uppercase;
    }

#nav ul li a {
    display: block;
    float: left;
    color: #ccc;
    background: #000;
    height: 32px;
    padding: 7px 14px 0 14px;
    }

#nav ul li a:hover {text-decoration: none; background: #0099CC}

.showNav {
    display: block !important;
    position: relative !important;
    top: 0px !important;
    padding-bottom: 20px !important;
    }

HTMLは次のとおりです。

    <div id="nav">
        <ul class="center">
            <li>
                <a id="logo" href="index.html">
                    <img src="assets/images/logo.png" alt="" />
                </a>
            </li>

            <li>
                <a href="#">About</a>
            </li>

            <li>
                <a href="#">Contributors</a>
            </li>

            <li>
                <a href="#">Contact</a>
            </li>

        </ul> <!-- nav -->
    </div>

    <div id="headerContainer" class="center">
        <div id="header">   

            <h3 id="scrapHeader">Thoughts About:</h3>   

            <input id="headerSearch" type="text" value="search" />
            <input id="headerSearchBtn" type="submit" value="" />

            <div class="clear"></div>

            <div id="categoryContainer">
                <ul>
                    <li>
                        <a href="#">Design</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Building</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Brands</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Technology</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Fashion</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Leadership</a>
                        <strong>123</strong>
                    </li>
                    <li>
                        <a href="#">Architecture</a>
                        <strong>117</strong>
                    </li>
                    <li>
                        <a href="#">Sustainability</a>
                        <strong>108</strong>
                    </li>
                    <li>
                        <a href="#">Modern</a>
                        <strong>95</strong>
                    </li>
                    <li>
                        <a href="#">Advertising</a>
                        <strong>84</strong>
                    </li>
                    <li>
                        <a href="#">Film</a>
                        <strong>82</strong>
                    </li>

                    <li class="clear"></li>

                </ul>

                <span id="categoryMore">More</span>
                <div class="clear"></div>
            </div> <!-- categoryContainer -->
            <div class="clear"></div>
        </div> <!-- header -->
        <div class="clear"></div>
    </div>
4

1 に答える 1

0

質問をすると、次の 2 分で自分で解決できます。

var headerClickOff = function() {
            $('#header:visible').slideUp({
                duration: 550, 
                easing: 'easeOutExpo'
            });
    };


$(document).bind('click', headerClickOff);
$(document).unbind('click', headerClickOff);
于 2010-08-11T14:19:18.040 に答える