クリックをリッスンする単純な JavaScript があり、クリックされると 4 つのことが起こります。
- 「フォームを開く」クラスがボタンに追加されました
- 「aria-expanded」属性は「true」に設定されます
- 以前に非表示にした div を表示します。
- ボタンの「後」テキストは「情報を閉じる」に変わります(これは、ボタンに新しいクラス「form-opened」が含まれているかどうかに基づいてCSSによって制御されます)。
別のボタンをクリックすると、最初にクリックしたボタンと逆のことが起こり、追加されたクラスが削除され、「aria-expanded」属性が「false」にリセットされ、div が再び非表示になります (CSS 用に再設定されます)。 「後」のテキストは「続きを読む」に戻ります。
ただし、同じボタンが 2 回目にクリックされると、追加されたクラスは期待どおりに削除され、div は再び非表示になりますが、「aria-expanded」属性は「false」にリセットされません。誰かがその理由を説明し、私が何をすべきかを教えてもらえますか? (jQuery はありません、ありがとう)。
リーリー
リーリー
リーリー
同様のクエリをいくつか見たことがありますが、まったく同じではなかったり、非常に古いものであったり、jQuery を使用していたりします。
ボタンをクリックすると、他のすべてのボタンの
リーリーaria-expanded
プロパティのみが false に設定されます。現在のボタンの状態を切り替える必要もあります: