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>

我想在单击任何一个时添加“open”类，并在单击“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

我认为this会解决您的问题。

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

切换类并隐藏div

1 个答案: