-1

私はJavascriptをいじくり回していて、少しのコードに経験豊富な目を使うことができます。アコーディオンdivの1つの開閉状態に応じて、divを表示/非表示にしようとしています。私のコードはひどい混乱だと確信しているので、私はそれをまっすぐにすることができないように見えるので、ここに投稿します（私は数日間それをやってきたので、それは試してみなかったからではありません）。これが私のスクリプトです：

        <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                alwaysOpen: false,
                active: false
            });
        $("h3#bubble").on("click", function(event, ui) {                
            if ("section#bubble").css(display","none") {
              $("#bg4-5").css("opacity", "0"); }
            else ("section#bubble").css(display","block") {
              $("#bg4-5").css("opacity", "1"); }
            });
        </script>

ご参考までに、＃bd4-5のコンテンツはSpotify iframeであり、ページの読み込み時に完全に読み込むにはアコーディオンの外にある必要があるようです。したがって、ここでは、表示と非表示を処理するために、この不透明度のトリックに頼っています。

お時間を割いていただき、誠にありがとうございます。

4

4 に答える 4

2

コードにはいくつかの構文エラーがあります。

if ("section#bubble").css(display","none") {

ステートメントのif条件は括弧で囲む必要があります。$さらに、直前のと冒頭の引用が欠落していますdisplay。これらの問題を修正すると、次のようになります。

 if ( $("section#bubble").css("display","none") ) {

...しかし、それはプロパティを設定し、display真実であると評価します。プロパティをテストしようとしているので、displayこれが必要だと思います。

if ($("section#bubble").css("display") === "none") {

else次に、回線上で同様の問題が発生します。

else ("section#bubble").css(display","block") {

（なしで）は条件を持つことができないelse ifので、私はあなたが意味すると思います。ここでも、jQuery関数を呼び出すためのが欠落しており、前に最初の引用符があり、現在の値を設定するのではなく、テストしようとしている可能性があります。そして、条件の前後に括弧が必要です。elseif$displaydisplay

else if ($("section#bubble").css("display") === "block") {

});コードには、ドキュメントレディハンドラーを閉じるためのファイナルもありません。

これがあなたがやろうとしていることについての私の最善の推測です：

    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: false,
            alwaysOpen: false,
            active: false
        });
        $("h3#bubble").on("click", function(event, ui) {                
            if ($("section#bubble").css("display") === "none") {
               $("#bg4-5").css("opacity", "0");
            } else if ($("section#bubble").css("display") === "block") {
               $("#bg4-5").css("opacity", "1");
            }
        });
    });
于 2012-12-02T03:30:14.977 に答える
1

、 for 、forステートメント、 forステートメントが欠落"しており、条件を受け入れない場合は、代わりに使用する必要があります。この場合は不要です。ただし、正しい構文を使用しても、コードが期待どおりに機能しない場合でも、またはcssメソッドをゲッターとして使用できます。display"$/jQuery("section#bubble")})$(function(){()ifelseelse ifis(':hidden')$('section.bubble').css('display') ==== 'block'

$(function() {
    $("#accordion").accordion({
        collapsible: true,
        autoHeight: false,
        alwaysOpen: false,
        active: false
    });
    $("h3.bubble").on("click", function(event, ui) {
        if ( $('section.bubble').is(':hidden') ) {
              $("#bg4-5").css("opacity", "0");
        } else {
            $('section.bubble').css("opacity", "1");
        }
    });
})

IDは一意である必要があることに注意してください。代わりに、クラスを使用する必要があります。

于 2012-12-02T03:31:29.917 に答える
0

あなたの素晴らしい指導のおかげで、私は何が起こっているのか、そして何が必要なのかを理解するのに十分理解しました！これが私が思いついたものです。それは不格好ですが、それは仕事をします！

            $("h3#bubbleh3").on("click", function(event, ui) {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {
                       $("#bg4-5").css("opacity", "0");
                    } else if ($("section#bubble").css("display") === "block") {
                       $("#bg4-5").css("opacity", "1");
                    }
                }, 500);
            });

みなさん、ありがとうございました。

于 2012-12-02T09:21:05.107 に答える
0 
<!-- Put this code before the </body> tag -->
<script>
        $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: false,
            alwaysOpen: false,
            active: false
        });
        $("h3#bubble").on("click", function(event, ui) {
            $("#bg4-5").toggle();
        });
</script>

これは、h3＃bubbleがクリックされたときに＃bg4-5コンテンツのオンとオフを切り替えるだけである限り、同じことを行う必要があります。バブルのIDを持つ要素は1つだけであるため、複数の要素が必要な場合は、代わりにクラスを使用します。

于 2012-12-02T03:46:04.097 に答える