Нажмите 2 кнопки друг на друга с функцией html преобразования по флажку выкл. Не переключаемый класс

Question

Мне нравится соединять две функции кнопок.

Когда box1 открывается, нажмите box2, закройте box1 и откройте box2. Когда box2 открывается, нажмите box1, закройте box2 и откройте box1.

Мне нравится сохранять html изменения каждой кнопки.

Легко, если я могу использовать toggleclass для добавления и удаления Класс для кнопок, но он не применяется для этих кнопок, который меняет html на флаг.

Я пытался позволить им .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>




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

Answer 2

Вы можете сделать это с более коротким кодом, сначала спрятав все меню и показав меню текущей нажатой кнопки, как показано ниже

<script>
      $(function(){
         $("button").click(function() {
            $("button menu").hide()
            $(this).show();
         });
      });
</script>

Примечание: этот сценарий применим, только если ваше меню относится к кнопке , поскольку вы не показывали html этого, тогда я предположил, что оно было относительным.