一键切换 2 个 div答案

【问题标题】：Toggle 2 divs with one button一键切换 2 个 div
【发布时间】：2022-08-24 19:44:36
【问题描述】：

我有一个按钮。我正在尝试一键切换 2 个 div。接下来是逻辑：

第一次单击时隐藏 BOX 1 并显示 BOX 2
第二次点击隐藏BOX 2显示BOX 1

这是我尝试过的，但只适用于第一次点击，如果你取消注释你会看到的代码，而不是检查 BOX 2 的可见性

HTML

<a class=\"toggle-btn\">TOGGLE BUTTON</a>

<div class=\"business-accordion\">
  <h4>Business Accorodion</h4>
</div>

<div class=\"customer-accordion\">
  <h4>Customer Accorodion</h4>
</div>

jQuery(\'.toggle-btn\').on(\'click\', function(){
    checkBusinessVisibility();
    // checkCustomerVisibility();


    function checkBusinessVisibility() {
        if(jQuery(\".business-accordion\").is(\":visible\")){
            jQuery(\".business-accordion\").hide();
            jQuery(\".customer-accordion\").show();
         }  
    }
    
    // function checkCustomerVisibility() {
    //     if(jQuery(\".customer-accordion\").is(\":visible\")){
    //         jQuery(\".customer-accordion\").hide();
    //         jQuery(\".business-accordion\").show();
    //     }
    // }
});

不建议您在 click 函数中包含函数。

标签： jquery toggle

【解决方案1】：

你可以这样做：

jQuery('.toggle-btn').on('click', function() {
  checkBusinessVisibility();
});

function checkBusinessVisibility() {
  var check = jQuery(".business-accordion").is(":visible");
  jQuery(".business-accordion").toggle(!check);
  jQuery(".customer-accordion").toggle(check);
}

演示

jQuery('.toggle-btn').on('click', function() {
  checkBusinessVisibility();
});

function checkBusinessVisibility() {
  var check = jQuery(".business-accordion").is(":visible");
  jQuery(".business-accordion").toggle(!check);
  jQuery(".customer-accordion").toggle(check);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="toggle-btn">TOGGLE BUTTON</a>

<div class="business-accordion">
  <h4>Business Accorodion</h4>
</div>

<div class="customer-accordion">
  <h4>Customer Accorodion</h4>
</div>

【讨论】：