jquery - 切换类并隐藏 div

Question

我有一个联系表格，我正在尝试显示/隐藏 div 和一个“打开”到单击的选项卡的类。这是非常基本的，用户将点击“业务请求”或“有问题？”。

首次查看联系表单时，默认情况下“业务请求”显示为“打开”。单击“有问题”将隐藏页面中的一些 div。

<div class="contact_tab_container">
<div class="contact_tab business_request open">
  <p>Business request</p>
  <span>
  <p>Let’s work together!</p>
  </span> </div>
<div class="contact_tab have_a_question">
  <p>Have a question?</p>
  <span>
  <p>Ask us anything or just say Hi</p>
  </span> </div>

我想在单击任何一个时添加“打开”类，并在单击“have_a_question”div 时隐藏以下 div：.contact_additional、.contact_budget、.attach_files

当单击“business_request” div 时，这些 div 会再次显示。

关于如何做到这一点的任何想法？

$(window).load(function() {
$('.have_a_question').toggle(function() {
$(this).addClass('open');
$('.business_request').removeClass('open');
return false;
},
function() {
$('.have_a_question').toggle(function() {
$(this).addClass('open');
$('.business_request').removeClass('open');
return false;
});
}); 
}); 

Answer 1

我认为这将解决您的问题。

$('.contact_tab_container').on('click', '.contact_tab', function(e){
    var target = $(e.currentTarget).addClass('open');
    target.siblings('.contact_tab').removeClass('open');

    if(target.is('.business_request ')){
        $('.contact_additional').show();
        $('.contact_budget').show();
        $('.attach_files').show();
    }else{
        $('.contact_additional').hide();
        $('.contact_budget').hide();
        $('.attach_files').hide();
    }
});