62408


box1とbox2のボタンはクリックすると中の文字が変わるようになっています。  
htmlを変えるので、toggleclassではうまくいきません。

やりたいことは、  
box1が開いているときにbox2を押すと、box1は閉じて、box2が開き、  
box2が開いているときにbox1を押すと、box2は閉じて、box1が開くということなのですが、あと1歩（？？？）のところでうまくいきません

お互いが開いているのかどうか、要素をlengthやvisibleなんかで参照して、開いていたら.clickでお互いを押させて相手を閉じさせるように試みていますが、片方しかうまくいきません。

再現できるコードこちらです。どなたかお願いサミアドンします

html

[code]

    <div class="wrapping">
    <div class="buttontoggle1">
    <div>box1</div>
        </div>
    
        <div class="content1">
    green1
        </div>
    </div>
    
    <div class="wrapping">
    <div class="buttontoggle2">
    <div>box2</div>
        </div>
    
        <div class="content2">
    green2
        </div>
    
        </div>
    
[/code]

css

[code]

    .wrapping{
    position:relative;float:left;margin-right:20px;}
    .content1,.content2{
        display:none;
        position: absolute;
        top: 50px;
        width:50px;
        height:50px;
        background-color:green;
    }
    
    .buttontoggle1,.buttontoggle2{
    float:left;
    width: 50px;
    height:50px;
    background-color:red;
        margin-right:10px;
    }
    
    .close1,.close2{
        height:50px;
        width:50px;
        border:white solid 2px;
    }
    
    .active{background-color:blue;}
    
[/code]

Jquery

[code]

    <!--box1 -->
    <script>
    $(function(){
      $(".content1").css("display","none");
      $(".buttontoggle1").on("click", function() {
        $(".content1").slideToggle();
        $(this).toggleClass("active");
      });
    });
    </script>
    
    <script>
    $(function(){
      var flg = "off";
      $('.buttontoggle1').on('click', function(){
        if(flg == "off"){
          $(this).html("<div class='close1'>clicked</div>");
          flg = "on";
        }else{
          $(this).html("<div>box1</div>");
          flg = "off";
        }
      });
    });
    </script>
    
    <script>
    $(function () {
      $(".buttontoggle1").click(function (e) {
       if($(".content1").length>0)
          $(".content1").show();
          e.stopPropagation();
       });
    });
    
       $(document).click(function() {
        if($(".close1").length>0)
         $(".buttontoggle1").click();
    });
    </script>
    
    
    
    
    <!--box2 -->
    <script>
    $(function(){
      $(".content2").css("display","none");
      $(".buttontoggle2").on("click", function() {
        $(".content2").slideToggle();
        $(this).toggleClass("active");
      });
    });
    </script>
    
    <script>
    $(function(){
      var flg = "off";
      $('.buttontoggle2').on('click', function(){
        if(flg == "off"){
          $(this).html("<div class='close2'>clicked</div>");
          flg = "on";
        }else{
          $(this).html("<div>box2</div>");
          flg = "off";
        }
      });
    });
    </script>
    
    <script>
    $(function () {
      $(".buttontoggle2").click(function (e) {
       if($(".content2").length>0)
          $(".content2").show();
          e.stopPropagation();
       });
    });
    
       $(document).click(function() {
        if($(".close2").length>0)
         $(".buttontoggle2").click();
    });
    </script>
    
    
    
    
    <!--ここから先で互いにボタンを押させようとしています -->
    
    <script>
    $(function(){
    $('.buttontoggle2').on('click', function(){
    if($(".close1").length>0)
    $(".buttontoggle1").click();
    });
    });
    </script>
    
    
    <script>
    $(function(){
    $('.buttontoggle1').on('click', function(){
    if($(".close2").length>0)
    $(".buttontoggle2").click();
    });
    });
    </script>
    
[/code]


CC BY-SA 4.0
2020-01-20T16:37:20.177
62405
2020-01-21T01:20:43.897
2020-01-20T16:44:54.777
35952
35952
question
jquery
flagによってhtmlを変えるボタンを２つ、スイッチのように動かす


ポイントは２つあって  
（１）クリックイベントが実行されたときにクリックイベントをつなげて発火してしまっているのでおそらく混乱している  
（２）トグル操作で何もかもやろうとしている。

Javascriptでイベントとアクションをまず切り離す作業をしたほうがいいです。

まずはイベントとしては  
トグル１の領域をクリックする  
トグル２の領域をクリックする  
それ以外の領域をクリックする

の３つがあります。

次にアクションは  
トグル１の領域をclickedにする＆トグル１の領域のgreen1を表示する  
トグル２の領域をclicledにする＆トグル２の領域のgreen2を表示する  
トグル１の領域をboxにする＆トグル１の領域のgreen1を非表示する  
トグル２の領域をboxにする＆トグル２の領域のgreen2を非表示する  
の４つがあります。

これらアクションは関数化しておくと良いでしょう。  
openToggle1  
openToggle2  
closeToggle1  
closeToggle2

ポイントはtoggle~は使わないことです。  
明確に表示する＆非表示にするというアクションをしましょう。

次にこれらをつなげます。  
例えば  
トグル１の領域をクリックしたら  
トグル１の領域が閉じていればopenToggle1&closeToggle2を実行  
もしくはトグル１の領域が開いていればcloseToggle1を実行

トグル２の領域をクリックしたら  
トグル２の領域が閉じていればopenToggle2&closeToggle1を実行  
もしくはトグル２の領域が開いていればcloseToggle2を実行

それ以外の領域をクリックしたら  
トグル１の領域が開いていればcloseToggle1を実行  
トグル２の領域が開いていればcloseToggle2を実行

[code]

    $(function(){
      $(".content1").css("display","none");
      $(".buttontoggle1").on("click", function(e) {
        if($(".close1").length == 0){
          openToggle1();
          closeToggle2();
        }else{
          closeToggle1();
        }
        e.stopPropagation();
      });
    });
    
    $(function(){
      $(".content2").css("display","none");
      $(".buttontoggle2").on("click", function(e) {
        if($(".close2").length == 0){
          openToggle2();
          closeToggle1();
        }else{
          closeToggle2();
        }
        e.stopPropagation();
      });
    });
    
    $(document).click(function(e) {
      if($(".close1").length>0) closeToggle1();
      if($(".close2").length>0) closeToggle2();
      
    
    });
    
    
    
    function openToggle1() {
        $(".content1").slideDown();
        $(".buttontoggle1").addClass("active");
        $(".buttontoggle1").html("<div class='close1'>clicked</div>");
    }
    
    function openToggle2() {
        $(".content2").slideDown();
        $(".buttontoggle2").addClass("active");
        $(".buttontoggle2").html("<div class='close2'>clicked</div>");
    }
    
    function closeToggle1() {
          $(".content1").slideUp();
          $(".buttontoggle1").removeClass("active");
          $(".buttontoggle1").html("<div>box1</div>");
    }
    
    function closeToggle2() {
          $(".content2").slideUp();
          $(".buttontoggle2").removeClass("active");
          $(".buttontoggle2").html("<div>box2</div>");
    }
[/code]

[code]

    .wrapping{
    position:relative;float:left;margin-right:20px;}
    .content1,.content2{
        display:none;
        position: absolute;
        top: 50px;
        width:50px;
        height:50px;
        background-color:green;
    }
    
    .buttontoggle1,.buttontoggle2{
    float:left;
    width: 50px;
    height:50px;
    background-color:red;
        margin-right:10px;
    }
    
    .close1,.close2{
        height:50px;
        width:50px;
        border:white solid 2px;
    }
    
    .active{background-color:blue;}
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <div class="wrapping">
    <div class="buttontoggle1">
    <div>box1</div>
        </div>
    
        <div class="content1">
    green1
        </div>
    </div>
    
    <div class="wrapping">
    <div class="buttontoggle2">
    <div>box2</div>
        </div>
    
        <div class="content2">
    green2
        </div>
    
        </div>
[/code]

本来は上のソースに表示非表示制御をきれいにするために「状態」を意識してflg制御や動作フローを考えると良いですが、今回はclose1close2があるかどうかで切り替えを行っています。  
今はまずはイベントとアクションが分けられる＆トグルを使わないができれば良いと思います。


CC BY-SA 4.0
2020-01-21T01:20:43.897
62408
2020-01-21T01:20:43.897
22665
62405
answer