0

エフェクトのCSS3トランジションと一緒に使用しているカスタマイズされた表示/非表示トグルスクリプトがあります。

スクリプトは、クリックするとコンテンツを表示し、「HideLink」リンクをクリックするとコンテンツを非表示にします。CSS3トランジションを備えていますが、Operaのみです。

他のブラウザでは、スクリプトはコンテンツを表示するためにのみ機能し、非表示リンクをクリックしても機能しません。

このJSfiddleを参照してください：http：//jsfiddle.net/xte63/

4

1 に答える 1

0

最近のshow/hidden javascriptでは、HTML5のdata-*属性を使用することを好みます。

これは、getAttributeおよびsetAttribute関数を介してHTML5以外のブラウザーですでに使用できます。

IE7、Chrome、Operaに対してすぐに試してみましたが、うまくいくようです。

http://jsfiddle.net/ThJcb/

function showHide(shID) {
    var exDiv = document.getElementById(shID);
    if(exDiv.getAttribute("data-visible") != 'false'){
         document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';  
         document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';  
         exDiv.setAttribute("data-visible" , 'false');
    } else { 
         document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';  
         document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';   
          exDiv.setAttribute("data-visible" , 'true'); 
    }
}

これにより、CSS値をチェックしなくてもdivの状態を判断できます。

編集：コメントで指摘されているように、タイプミスが非表示リンク（onclickではなくonlick）にあり、上記のjsfiddleが機能しているように見えましたが、機能していませんでした。少なくとも、ロジックでエラーを起こしたのとまったく同じではなく、「data-visible」をtrueではなくfalseに設定しました。

更新されたjsfiddleは次のとおりです：http：//jsfiddle.net/ThJcb/4/ （ 上記のjavascriptスニペットも更新されました）

于 2012-06-16T11:21:54.297 に答える