0

見出しタグと右に浮かぶ矢印があり、その矢印をクリックすると、非表示の要素の内容が表示され、下向き矢印が上向き矢印に変わるように、私が取り組んでいるコードがあります。トグル内の画像の下にあるリンクが機能しないことを除いて、すべて正常に機能しているようです。何らかの理由でテキストを強調表示できないため、コーディングのどこかに重複があると想定しています。

JavaScript

    function toggleDisplayNewark() {
    document.getElementById("toggleMe").style.display == "none";
    if(document.getElementById("toggleMe").style.display == "none" ) {
        document.getElementById("toggleMe").style.display = "inline";
        document.getElementById("toggleMe").style.visibility = "visible";
        document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
    } else {
        document.getElementById("toggleMe").style.display = "none";
        document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
    }
}

HTML

            <div id='newark'>
                    <div class='text-heading'>
                        <h2>Newark</h2>
                        <a href="#newark" onclick="toggleDisplayNewark();">
                            <div id='arrow'></div>
                        </a>    
                    </div>
                    <div id='toggleMe' style='display: none;'>  
                        <div class='alignleft thumb-imgs'>
                            <img src='img/excercise.png' />
                            <a href='http://exercise.com/' target='_blank'>Exercise Institute</a>
                        </div>                      
                        <div class='clear'></div>   
                    </div>
                </div>

CSS

#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}   
#toggleMe {display: none;}
.text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
.clear {clear: both;}
.thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}

これをワードプレスに入れる前にhtmlファイルに作成したので、正しく動作することを確認できました。問題がどこにあるかを見つけることができないようです。スペースをあまり占有しないように、コーディングをストライプ化しました。これのアイデアは、右側に矢印の付いた見出しを付けて、このボックスをドロップダウンし、各行のそれぞれの下にリンクがある 3 つの画像を配置することです。

事前にご協力いただきありがとうございます。

4

1 に答える 1

0

http://jsfiddle.net/QXSXC/

オンクリックを削除

<a href="#newark" >

そしてjQueryを使用します：

$('#newark').click(function() {
    document.getElementById("toggleMe10").style.display == "none";
    if(document.getElementById("toggleMe10").style.display == "none" ) {
        document.getElementById("toggleMe10").style.display = "inline";
        document.getElementById("toggleMe10").style.visibility = "visible";
        document.getElementById("arrow10").style.background = "url(img/up.png) no-repeat";
    } else {
        document.getElementById("toggleMe10").style.display = "none";
        document.getElementById("arrow10").style.background = "url(img/down.png) no-repeat";
    }
});

#newarkjQueryを使用できない場合は、純粋なJS google itでハンドラーを割り当てることができます

于 2013-03-22T19:57:41.963 に答える