1

矢印のクリックに基づいて 2 つの div を表示/非表示にするコードがあります。ただし、2 番目の div は非表示になる前に 2 回クリックする必要があり、矢印は期待どおりに変化しません。トップ div は完全に機能します。私が間違っていることについて何か提案はありますか？

編集- 矢印の命名エラーを指摘してくれた 2 人のポスターに感謝します。ただし、ページを読み込んだ後、2 番目の div を切り替えるには 2 回クリックする必要があります。

HTML

<div id="start_conditions_arrow" class="arrow_down" onclick="toggleDiv('start_conditions')"></div>
<h2>Starting Conditions</h2>

<div id="start_conditions">
    <%= render :partial => 'start_conditions', :object => @page.start_conditions %>
</div>

<div id="probability_arrow" class="arrow_right" onclick="toggleDiv('probability_inputs')"></div>
<h2>Probability Inputs</h2>

<div id="probability_inputs">
    <%= render :partial => 'probability_inputs', :object => @page.probability_inputs %>
</div>

Javascript

var toggleDiv = function(id){
var tag = document.getElementById(id).style;
    if(tag.display == 'none'){
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
    } else {            
        document.getElementById(id).style.display='none';
        document.getElementById(id + '_arrow').className='arrow_right';
    }
};

CSS

.arrow_down, .arrow_right {
    width: 0; 
    height: 0;
    margin: 12px 12px 0 0;
    float: left;
    cursor: pointer;
}

.arrow_down {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid #d5d5d5;
}

.arrow_right {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #d5d5d5;
}

#probability_inputs {
    display: none;
}

#start_conditions {
    display: none;
}

上記を含む Codepen は次のとおりです: https://codepen.io/anon/pen/yXozYJ

4

5 に答える 5

3

2 番目の矢印要素には、 probability_inputs_arrowas id と notprobability_arrowが必要です。これは、関数 as でその id を作成し、id + '_arrow'渡すため'probability_inputs'です。

于 2013-03-15T14:31:51.600 に答える
1

実際、ここでエラーが発生しています

ここに画像の説明を入力してください

probability_inputs_arrow2番目の要素は、idではなくidとして持つ必要がありますprobability_arrow。

于 2013-03-15T14:33:39.943 に答える