回答率: 85.36%

質問するログイン新規登録

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら

トップ HTMLに関する質問

Q&A

解決済

1回答

1875閲覧

HTML details summaryのclose動作をキャンセルさせるには？

退会済みユーザー

総合スコア0

0グッド

0クリップ

投稿2020/12/12 12:24

0

0

タイトルの通りです
details summaryの閉じる動作をJavaScriptか何かでキャンセルしたいです
わかっている事は下記になります

//alert(id.getAttribute('open')) 開いているかどうかの取得？
//id.removeAttribute('open');//開いているものを閉じる

閉じる動作をキャンセルものが見当たりません

html
1<details id="aaaa">
2    <summary onclick="if(aaaa.getAttribute('open')){/* 開いてる状態であればクリックした時に閉じるを動作のキャンセルを行いたい */}">Details</summary>
3    Something small enough to escape casual notice.
4

<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

行動規範の内容に同意します

回答1件

0

ベストアンサー

aaaaにcssでpointer-evens:none;をつければaaaaをクリックできなくなり、閉じることができなくなります。
クリックをトリガーにすれば、一度開くと閉じることができなくなります。
如何でしょうか？

投稿2020/12/12 13:06

編集2020/12/12 13:07

総合スコア563

退会済みユーザー

2020/12/12 13:24

回答ありがとうございます pointer-evens:none;でもevent.preventDefault()でもいけました

2020/12/12 14:15

その手もあったんですね！すごいですね^^ 問題解決おめでとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ HTMLに関する質問

HTML details summaryのclose動作をキャンセルさせるには？