如何在点击并显示另一个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); 
     }); 
    }) 
});