0

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

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

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

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

html

<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>

css

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

Jquery

<!--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>

1 件の回答 1

1

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

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

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

の3つがあります。

次にアクションは
トグル1の領域をclickedにする&トグル1の領域のgreen1を表示する
トグル2の領域をclicledにする&トグル2の領域のgreen2を表示する
トグル1の領域をboxにする&トグル1の領域のgreen1を非表示する
トグル2の領域をboxにする&トグル2の領域のgreen2を非表示する
の4つがあります。

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

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

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

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

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

$(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>");
}
.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;}
<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>

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

1
  • 完璧です!考え方まで披露していただいて、ベリーベリーセンキューです!
    – cwhiro
    2020年1月21日 13:10

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。