0

我有一个静态 Bootstrap 菜单，上面有一个 jQuery slideToggle 区域，使用菜单旁边的链接激活。

我遇到的问题是，当切换打开时，菜单在屏幕上保持静止，但切换区域随着内容移动。

我的 HTML 是

<div class="dropdownwrap"></div>
<header id="mpthis" class="banner navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner">
        <div class="container">
            <div id="toplogo"> <a id="dropdown" href="#" title="Click This Button">X</a>
            </div>
            <nav class="nav-main nav-collapse collapse" role="navigation">
                <ul id="menu-primary-navigation" class="nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                    <li><a href="#">Link 7</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<div id="content">
    <p>Croissant chocolate muffin. Powder fruitcake fruitcake cupcake fruitcake sesame snaps. Fruitcake macaroon sesame snaps candy cake bear claw tart tiramisu. Sugar plum wafer pie ice cream marshmallow bear claw powder. Sesame snaps cotton candy jelly beans ice cream. Muffin gummies jelly beans croissant tootsie roll cake marshmallow dragée. Jelly-o cookie toffee oat cake. Chupa chups dessert fruitcake gummies fruitcake muffin gummi bears ice cream. Bonbon pudding cake soufflé macaroon sweet roll. Oat cake jelly-o pastry. Sweet roll cotton candy chupa chups cheesecake. Unerdwear.com chocolate candy canes gummi bears tootsie roll apple pie toffee pastry.</p><div>

我的 CSS 是

.dropdownwrap {background-color:#ef0403;display:none;height: 150px;width: 100%;z-index: 1000;top: 0;position: relative;}.navbar {width: 100%;height: 44px;background: #eee;display: block;}#toplogo {float: left;}.navbar .nav>li {float: left;list-style: none;padding: 0px 14px;}.navbar-fixed-top {position: fixed;right: 0;left: 0;z-index: 1030;margin-bottom: 0;}.navbar-fixed-mp {right: 0;left: 0;z-index: 1030;position: fixed;}#content {padding-top: 34px}

我的 jQuery 是

jQuery(document).ready(function () {
jQuery(".dropdownwrap").hide();
jQuery('#dropdown').click(function () {

    if (!jQuery(".dropdownwrap").is(":visible")) jQuery('#mpthis').removeClass("navbar-fixed-top").addClass("navbar-fixed-mp");
    jQuery('.wrap').addClass("fixthis");


    jQuery(".dropdownwrap").slideToggle(function () {
        if (!jQuery(".dropdownwrap").is(":visible")) jQuery('#mpthis').addClass("navbar-fixed-top").removeClass("navbar-fixed-mp");
        jQuery('.wrap').removeClass("fixthis");



    });
});

});

我在下面创建了一个小提琴，这说明了正在发生的事情

http://jsfiddle.net/blayney/XDUuX/24/

如果有人可以提供帮助，将不胜感激

谢谢

马特

4

1 回答 1

0

我不确定您是否得到答案，但问题是您正在删除navbar-fixed-top具有该position: fixed属性的 ，并将其替换为navbar-fixed-mp，也已修复。位置意味着元素相对于fixed浏览器而不是页面定位 - 因此它不滚动。如果您只是删除navbar-fixed-top而不用替换它navbar-fixed-mp，您应该会获得所需的效果。

http://jsfiddle.net/XDUuX/28/

于 2013-08-28T15:25:21.427 回答