1

特定の要素がクリックされたときにスライドダウンする必要があるドロップダウン div があるので、js 関数を作成しましたが、これまでのところ動作しているように見えました。私が使用:beforeしたこの特定の要素:afterに対して、ドロップダウン div が上下にスライドするかどうかに応じてスタイルを変更する必要がある矢印のような図を作成します。

function opere_slide(){

    ul=document.getElementById('opere');
    opere_tag=document.getElementById('opere_tag');
    margin=ul.style.marginTop;
    if(margin=='0px'){
       ul.style.marginTop='-200px';
       opere_tag.style.backgroundColor='white';
       opere_tag.style.borderBottomColor='#BCD2EE';
    }
    else{
       ul.style.marginTop='0px';
       opere_tag.style.backgroundColor='#F8F8F8';
       opere_tag.style.borderBottomColor='#E0E0E0';
    }
}

そのため、上記の関数に平和を追加して、HTML スタイルの要素を作成し、必要な新しい css コードを適用しました。問題は次のとおりです。関数が機能しなくなったようです。

function opere_slide(){

    head=document.getElementsByTagName('head')[0];
    stylesheet=document.createElement('style');
    ul=document.getElementById('opere');
    opere_tag=document.getElementById('opere_tag');
    margin=ul.style.marginTop;
    if(margin=='0px'){
       ul.style.marginTop='-200px';
       opere_tag.style.backgroundColor='white';
       opere_tag.style.borderBottomColor='#BCD2EE';
    }
    else{
       ul.style.marginTop='0px';
       opere_tag.style.backgroundColor='#F8F8F8';
       opere_tag.style.borderBottomColor='#E0E0E0';
       text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;}
       div#opere_tag:after{border-top:10px solid #F8F8F8;}');
       stylesheet.appendChild(text);
       head.appendChild(stylesheet);
    }
}

PS: 最後にもう 1 つ重要なことがあります。この関数は、HTML スクリプト要素を「エコー」する php エコー関数の内部にあります。そのため、単一引用符のみを使用しました。

4

2 に答える 2

1

textnode-stringの改行による構文エラーがあります：

text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;}
   div#opere_tag:after{border-top:10px solid #F8F8F8;}');

その改行を削除するだけです。

text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;} div#opere_tag:after{border-top:10px solid #F8F8F8;}');

詳細については、SOの「 JavaScriptで複数行のコードにまたがって文字列を分割するにはどうすればよいですか？ 」を参照してください。

于 2012-06-17T20:52:43.347 に答える
0

次のようなことを試すことができます：

<div class="???">
 ...
</div>

スクロールするときは、divのクラスをscrollDownまたはscrollUpに変更し、cssを変更して異なる矢印が表示されるようにします

.scrollUp div#opere_tag:after{...}
.scrollDown div#opere_tag:after{...}
于 2012-06-17T20:55:13.373 に答える