如何在點擊並顯示另一個div時隱藏div？

Question

我有這個疑問點擊功能：

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.show_hide').click(function() { 
     $(".box").fadeIn(400); 
     //$(".box").fadeOut(2500); 
    }); 
}); 
</script> 

<div class="show_hide">Click Here</div> 

    <div class="box" style="display:none;"> 
    <div class="success_message"> 
     <span class="yes">Yes</span> 
     <span class="no">No</span> 
    </div> 
</div> 

一旦「點擊這裏」被點擊時，我想在這裏隱藏點擊選項，顯示yes和no。但是，當點擊這些選項（是或否）時，我想隱藏它們並顯示點擊這裏。我怎樣才能做到這一點？

我該如何做到這一點？

Answer 1

演示-->http://jsfiddle.net/52a4n/1/

$('.show_hide').click(function() { 
    $(this).fadeOut(); 
    $(".box").fadeIn(400); 
}); 

$('.yes,.no').click(function() { 
    $(".box").fadeOut(250,function(){ 
     $('.show_hide').fadeIn(); 
    }); 
}); 

Answer 2

到目前爲止，您有正確的方法，您只需要進一步。這應該讓你，你正在尋找去，只要你有框的div緊接着箱的div

$(document).ready(function() { 
    $('.show_hide').click(function() { 
     $(this).hide().next().fadeIn(400); 
    }); 

    $('.box .success_message span').click(function() { 
     $(this).parents('.box:first').hide().prev().fadeIn(400); 
    }); 
}); 

Answer 3

Check this fiddle

$(document).ready(function() { 
    $('.show_hide').click(function() { 
     $(this).fadeOut(400, function() { 
      $(".box").fadeIn(400); 
     }); 

    }); 

    $('.success_message span').click(function() { 
     $(".box").fadeOut(400, function() { 
      $('.show_hide').fadeIn(400); 
     }); 
    }) 
});