jquery - 相互单击 2 个按钮，可通过标志打开关闭 html 转换功能。不是切换类

Question

我喜欢连接2个按钮功能。

当 box1 打开时，单击 box2 将关闭 box1，并打开 box2。当box2打开时，单击box1将关闭box2，并打开box1。

我喜欢保留每个按钮的 html 变化。

如果我可以使用toggleclass来添加和删除按钮的类，这很容易，但它不适用于这些通过标志更改html的按钮。

我试图在检查它们的“长度”或“可视性”后让它们互相点击(如果内容有长度或可见，则互相点击其他按钮)，但这种方法取消了彼此的功能。

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>




<!--This is what Im wondering how I can connect them -->

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

Answer 1

我想这就是你想要的代码。

 <script>

  $(function(){
    $(".aaa").click(function() {
      if($(".bbbmenu").is(":visible")){
        $(".bbbmenu").hide();
        $(".aaamenu").show();
      }
    });

    $(".bbb").click(function() {
      if($(".aaamenu").is(":visible")){
        $(".aaamenu").hide();
        $(".bbbmenu").show();
      }
    });
  });

 </script>