0

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

これらのdivは、「business_request」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;
});
}); 
});
4

1 に答える 1

2

これで問題が解決すると思います。

$('.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();
    }
});
于 2012-08-09T06:58:41.537 に答える