Q&A
具体的にどの要素を消したいかを質問文に追記されてはいかがでしょう。
html
1 2<p id="text1">text1</p><sapn class="span" id="main1">main1</sapn> 3<p id="text2">text2</p><sapn class="span" id="main2">main2</sapn> 4<p id="text3">text3</p><sapn class="span" id="main3">main3</sapn>
jquery
1$(".span").hide(); 2 3$("#text1").click(function(){ 4 $("#main1").slideToggle(); 5}); 6 7$("#text2").click(function(){ 8 $("#main2").slideToggle(); 9}); 10 11$("#text3").click(function(){ 12 $("#main3").slideToggle(); 13});
要素をslideToggleで表示する時に既に表示されている要素をhideにするにはどのようにすればいいですか？
回答2件
0
ベストアンサー
下記のようなことでしょうか。
html
1<p id="text1" class="text">text1</p> 2<sapn class="span" id="main1">main1</sapn> 3<p id="text2" class="text">text2</p> 4<sapn class="span" id="main2">main2</sapn> 5<p id="text3" class="text">text3</p> 6<sapn class="span" id="main3">main3</sapn>
js
1$(".span").hide(); 2 3$(".text").click(function(){ 4 $(this).next().slideToggle(); 5 $(".text").not($(this)).next().slideUp(); 6});
投稿2020/05/01 21:36
編集2020/05/01 21:55
総合スコア33790
0
要素をslideToggleで表示する時に既に表示されている要素をhideにするにはどのようにすればいいですか？
とのことですが、slideToggleでid="main1"のsapnタグが指定されているところから、これを非表示から表示して、.spanが付いている要素をhideしようとしてることから"main1"のsapnタグ以外のspanタグを非表示にしたいと脳内補完しました。
こんな感じでいいですか？ 意図的にアニメーションの時間を指定して、動作が確認できるようにしてあります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hide test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> #main1 { display: none; } </style> </head> <body> <p id="text1">text1</p><sapn id="main1">main1</sapn> <p id="text2">text2</p><sapn class="span" id="main2">main2</sapn> <p id="text3">text3</p><sapn class="span" id="main3">main3</sapn> <script> $("#text1").click(function(){ $("#main1").slideToggle(3000); $(".span").hide(6000); }); </script> </body> </html>
これで、意図したものになってるといいんですが・・・
あとスクリプトを書いた位置head内かbody内かで実行順序が変わったりしますので
これくらいの短いコードのときは省略せず全部記載して公開した方がいいですよー
公開されてない部分はこちらで脳内補完させていただきました。
なので、そこが原因で意図したものと違ってた場合はごめんなさい
投稿2020/05/01 15:10
編集2020/05/01 23:02
総合スコア501
あなたの回答
tips
プレビュー
