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

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

如何在单击时隐藏div并显示另一个？

3 个答案: