Question

我有一些HTML字段和表格我遇到的问题是，在某些字段中show()和hide()正在运行，而某些字段和表格只是不在在谷歌浏览器上。

工作代码示例：

HTML：

    <div class="one-col-box" >
            <label>Number</label>
            <input type="text" name="clientNumber" id="clientNumber" data-bind="event: { dblclick: dbClickChange }, value: clientNumber" style="width: 100%">  
            <select name="clientNumberSel" id="clientNumberSel" data-bind="options: result, value: clientNumbersOldVal, optionsCaption: '--- select ---', event: {change: loadPlans }" style="display: none"></select>
            <img id="imgClose" src="/monitring/js/images/close2.png" alt="Close" data-bind="click: hideClientNums" style="display: none;">
    </div>

和dbClickChange函数 - 双击输入时执行：

dbClickChange = function(){
                             $('#clientNumberSel').parent().show();
                             $('#clientNumberSel').show();

                             $('#imgClose').show();
                             $('#clientNumber').hide();                         
                           };

上面的代码完美无缺，但这个代码不是。

HTML

<div class="one-col-box" >
                <label style="width: 150px">Classification</label>
               <select class="selects" name="creditClassificationSoge" id="creditClassificationSoge" data-bind="value: creditClassificationSoge">               
                    <option>-- Select --</option> 
                    <option data-bind="click: hideClassif">No</option> 
                    <option data-bind="click: showClassif">Yes</option>         
                </select>
            </div>
    <div class="six-col-box">
        <div class="two-col-box" id="descrH" style="display: none;">
            <label>Description </label>
            <input type="text" style="width: 392px;"></input>
        </div>
    </div>

选择yes或no时执行的代码：

showClassif = function(){
                       $('#descrH').show();                       
                   };

                   hideClassif = function(){
                       $("#descrH").hide('fast');
                   };

我真的无法理解我的代码有什么问题，js中的两个部分是相同的，我会开始哭泣。为什么在某些方框中显示/隐藏是有效的，有些则不是？也许我错过了一些小事，但我无法发现它。

Answer 1

我会使用超时代替。该脚本立即执行，因此它同时显示和隐藏。

    // Animate Slide
    function showClassif(id){
        var div = $(id);
        div.show();
        var end = setTimeout(function(){
            div.hide('fast');
            clearTimeout(end);
        }, 200); // The delay is 200ms change the 200 to alter this

    });

    showClassif("#showClassif");

Answer 2

   $("#clientNumberSel").css("visibility", "hidden");
  $("#clientNumberSel").css("visibility", "visible");

Chrome中奇怪的显示/隐藏行为

2 个答案: