javascript - 如何在单击并显示另一个 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>

单击“单击此处”后，我想隐藏单击此处选项并显示“是”和“否”。但是，当单击其中任何一个选项（是或否）时，我想隐藏它们并显示单击此处。我怎样才能做到这一点？

我怎样才能做到这一点？

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

检查这个小提琴

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