Safariでブロックを非表示/表示するボタン（Googleサイトを使用）

Question

Googleサイトで作成したウェブサイトに、テキストブロックを表示/非表示するボタンを追加しました。問題は、Chrome/Firefoxでは動作するが、Safariでは動作しないということだ。 Googleのサイトでは単に処理するだけではないので、私はjavascript/JQueryを使用しませんでした。

以下に簡単なコードを追加しました。 この問題を解決するにはどうすればよいですか？私にとって

<div class="nascosto"> 
 
    <input type="button" value="Abstract" onclick=" 
 
    if (this.parentNode.nextSibling.childNodes[0].style.display != '') 
 
    { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Abstract'; } 
 
    else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Abstract'; }" /> 
 
</div><div><div class="nascosto" style="display: none;"> 
 
<p>Insert here 
 
</p> 
 

 
</div></div>

Answer 1

Firefoxでエラーもあります。私は、最初のdivの次の兄弟がテキスト要素であることを発見しました。私はこれを、ノード名のconsole.logで見つけました。以下のコード例でそれを見ることができます。私のために、以下のコードは現在動作していますが、私はサファリでこれをテストすることはできません。

また、関数はchildNodesではなく、子とも呼ばれます。多分、これはサファリの問題です。

機能をページの上部または下部に別々の機能で配置してください。あなたがやったやり方は本当に素晴らしいことではありません。あなたの答えのための

function doSomething(element) { 
 
    console.log(element.parentNode.nextSibling.nodeName); 
 
    if (element.parentNode.nextSibling.nextSibling.children[0].style.display != 'block') { 
 
    element.parentNode.nextSibling.nextSibling.children[0].style.display = 'block'; 
 
    this.value = 'Abstract'; 
 
    } else { 
 
    element.parentNode.nextSibling.nextSibling.children[0].style.display = 'none'; 
 
    this.value = 'Abstract'; 
 
    } 
 
}

<div class="hide"> 
 
    <input type="button" value="Abstract" onclick="doSomething(this)" /> 
 
</div> 
 
<div id="test2"> 
 
    <div class="hide" style="display: none;"> 
 
    <p>Insert text here</p> 
 
    </div> 
 
</div>