jQueryで要素をクリックしたときに現在表示されている要素を非表示にする

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にするにはどのようにすればいいですか？

kei344

2020/05/01 14:19

具体的にどの要素を消したいかを質問文に追記されてはいかがでしょう。

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

回答2件

ベストアンサー

下記のようなことでしょうか。

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});

Codepenサンプル

投稿2020/05/01 21:36

編集2020/05/01 21:55

hatena19

総合スコア34075

要素を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