jQuery和CSS，問題使用DIV

我有一個包含2個表格的框，左右。jQuery和CSS，問題使用DIV

左邊是好的，但右側包含一個表，我需要隱藏頁面加載，直到用戶輸入密碼，此時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>

從那裏我有隻有1個密碼字段的形式。輸入密碼時，ID爲「right」的DIV內的所有內容都會切換顯示。

我的問題是，在右表內，當我使用ID爲「right」的DIV時，隱藏內容溢出並且（自定義jQuery）滾動條中斷。

在主CSS文件中有一個使用「正確」的類條目，但不再在任何地方使用，所以我評論了它。

我已經嘗試了CSS屬性的每個不同的配置，但沒有任何不打破滾動條。

值得一提的是，在「右」DIV中還有另一個jQuery對象，並且滾動條也是jQuery cScroll插件。

來源

2013-07-12 PCLove

我不瞭解其他人，但即使您給出了很好的描述，但我很難想象這個問題。製作JS小提琴的Pehaps會很好。 – Ariane

我的問題是，該代碼可以在小提琴中正常工作，但是當我將它與JS和CSS整合到我的整個站點時，它會失靈。 – PCLove

嗨，請注意，任何具有任何瀏覽器/瀏覽器上的視圖源功能的用戶都可以閱讀隱藏的div，除非該內容在輸入密碼時被惡意插入。此外，任何具有螢火蟲或鉻的開發工具知識的人都可以將該div設置爲可見 –

經過大量測試和故障排除後，問題被隔離到我第一次構建頁面時使用的jQuery滾動條。這個滾動條基於jQuery庫1.3。

由於添加了滾動條，我實現了一些其他jQuery腳本，其中最高使用的庫是1.7。

在將我的jQuery更新爲1.9併爲舊插件添加jQuery遷移之後，滾動條在與DIV「show/hide」一起使用時出現故障。

我更改了jQuery滾動條和最初發布的關於消失的問題。新的滾動條是簡單而有吸引力的EnScroll。

@Prospector，感謝你的所有幫助，試圖找出答案。

來源

2013-07-13 23:25:00 PCLove

給這個一杆，因爲你給我最後的評論，這可能是你錯過了什麼

<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>

來源

2013-07-12 04:40:53 prospector

我的確做到了這一點，並切換作品，但滾動條又回到了破碎狀態。也嘗試了許多變化的CSS和DIV的位置。 – PCLove

嘗試溢出：滾動; – prospector

我曾嘗試過，但它添加了一個瀏覽器滾動條，它違背了使用自定義jQuery滾動條的目的。 – PCLove

你曾經考慮剛開輸入的值？

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

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

來源

2013-07-12 05:58:27 prospector

這實現了與滾動條相同的結果，儘管切換沒有任何內聯CSS工作。 – PCLove

嘗試位置：相對溢出：auto; – prospector

jQuery和CSS，問題使用DIV

回答

相關問題