Question

我对jQuery Show / Hide Methods有一种奇怪的行为。

我有一个浮动到右边的div（css Float：右）

如果我试图显示/隐藏的div不固定（css位置：固定），方法可以正常工作。

但滚动页面并将div固定到位后，当我隐藏它时，面板隐藏在右侧，但此面板的内容隐藏在左侧。

这是HTML：

<div class="BotonRecursos" id="BotonRecursos"><img src="next-icon.png" width="32" height="32" id="Image7"/></div>
<div class="bloaqueCompleto">
    <div class="bloaqueIzq float_Izq" id="bloaqueIzq">
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
    </div>
    <div class="bloaqueDer float_Der" id="bloaqueDer">
      <ul>
        <li>Listitem</li>
        <li>Listitem</li>        
        <li>Listitem</li>
        <li>Listitem</li>
        <li>Listitem</li>
      </ul>
    </div>
</div>

这是CSS：

.float_Izq { float: left; }
.float_Der { float: right; }

.bloaqueIzq
{
    width: 620px;
    min-height: 420px;
    border-right:1px solid #DBDBEA;
}

.bloaqueDer
{
    width: 330px;
}

.bloaqueCompleto
{
    width: 960px;
    min-height: 420px;
}

.BotonRecursos
{
    width:32px;
    height:32px;
    margin-left:960px;
}

 .fixedP {    
    position: fixed;     
    top: 32px;    
    margin-left: 630px;    
}     
 .fixedB {    
    position: fixed;     
    top: 0px;    
}

最后这是我调用的JQuery方法

$(document).ready(function () {

    // ***** Iamgen ocultar/mostrar panel de recursos *****
    var state = true;
    var sidebarWidth = $("#bloaqueDer").width();

    $("#Image7").click(function () {

        if (state) {
            $("#bloaqueIzq").animate({ width: "+=" + sidebarWidth + "px" }, 1000);
            $("#bloaqueDer").hide(1000, function () {
                $("#Image7").attr("src", "prev-icon.png");
            });
        } else {
            $("#bloaqueIzq").animate({ width: "-=" + sidebarWidth + "px" }, 1000);
            $("#bloaqueDer").show(1000, function () {
                $("#Image7").attr("src", "next-icon.png");
            });
        }

        state = (state) ? false : true;

    });

});

$(document).ready(function () {
    // check where the shoppingcart-div is  
    var offset = $('#bloaqueDer').offset();
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        // check the visible top of the browser     
        if (offset.top < scrollTop) {
            $('#bloaqueDer').addClass('fixedP');
        } else {
            $('#bloaqueDer').removeClass('fixedP');
        }
    });
});

$(document).ready(function () {
    // check where the shoppingcart-div is  
    var offset = $('#BotonRecursos').offset();
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        // check the visible top of the browser     
        if (offset.top < scrollTop) {
            $('#BotonRecursos').addClass('fixedB');
        } else {
            $('#BotonRecursos').removeClass('fixedB');
        }
    });
});

您可以在我托管的此测试中看到此行为的实际效果网站。（绿色箭头显示并隐藏面板）。

http://www.siinfod.com/jQuery/prueba.html

任何帮助将不胜感激

使用jQuery Show / Hide遇到时内容滑动方式错误

0 个答案: