jQuery和CSS，使用DIV发布

Question

我有一个盒子，里面有两张桌子，左右两张。

左边是好的，但是右边包含一个我需要在页面加载时隐藏的表，直到用户输入密码，这时DIV将被切换。

使用jquery的最基本用法，我的脚本如下：

<script type="text/javascript">

$('#pwd').on('keyup', function() {

$('#right').toggle(this.value.trim().toLowerCase() == 'access');
});
</script>

Inline CSS:
<style type="text/css">
#right {display:none;}
</style>

从那里我有一个只有一个密码字段的表单。当输入密码时，ID为"right“的DIV内的所有内容都会切换到显示。

我的问题是，在右表中，当我使用ID为" right“的jQuery时，内容溢出被隐藏，(自定义DIV )滚动条中断。

在主CSS文件中有一个使用"right“的类条目，但在任何地方都不再使用，所以我将其注释掉。

我尝试了CSS属性的每一种不同配置，但没有一种方法能解决滚动条问题。

值得一提的是，在"right“DIV中还有另一个jQuery对象，而且滚动条是jQuery cScroll插件。

Answer 1

经过多次测试和故障排除后，问题被隔离到我第一次构建页面时使用的jQuery滚动条上。这个滚动条是基于jQuery库1.3的。

自从添加滚动条以来，我已经实现了其他一些jQuery脚本，其中使用率最高的库是1.7。

在将我的jQuery更新到1.9并为旧插件添加了DIV之后，当使用jQuery“显示/隐藏”时，滚动条出现故障。

我更改了jQuery滚动条，我最初发布的问题就消失了。新的滚动条是简单但有吸引力的EnScroll。

@Prospector，感谢你为解决这个问题所做的所有帮助。

Answer 2

试一试，自从你上一次对我发表评论以来，这可能是你错过的

 <script type="text/javascript">
 $(document).ready(function () {

    $('#right').hide();
    $('#pwd').on('keyup', function() {
        $('#right').toggle(this.value.trim().toLowerCase() == 'access');
    });
});
</script>


<style type="text/css">
#right {display:none;overflow:auto;}
</style>

Answer 3

您是否考虑过只获取输入的值？

<script type="text/javascript">
 $(document).ready(function () {

    $('#right').hide();
    $('#pwd').on('keyup', function() {
        if($('#pwd').val()=='access'){
         $('#right').show();
        }
        else{
         $('#right').hide();
        }        
    });
});
</script>