jquery - 使用 jquery 显示/隐藏元素

Question

我有元素（div），

命名：元素1，元素2，元素3

默认情况下：element1 可见，element2 可见，element3 隐藏

这是我使用的代码

<script type="text/javascript">
    $(document).ready(function () {
        $('#element3').hide();
        $('#element1').click(function () {
            $('#element3').toggle(400);
        });
    });
</script>

当我单击 element1 时，我使用上面的代码使 element3 可见。

我的问题

1. 当我单击 element1 时，如何使 element2 隐藏并且元素 3 可见？

2. 在 element1 中再次单击后如何恢复默认值？

Answer 1

尝试

$(document).ready(function () {
    $('#element3').hide();
    $('#element1').click(function () {
        $('#element3').toggle(400);
        $('#element2').toggle(400);
    });
});

演示：小提琴

Answer 2

您可以使用以下解决方案来解决您的问题：

根据您的要求，您何时单击，element1然后在每次交替单击时分别切换。下面的代码应该可以解决您的问题。element3element2

$(document).ready(function () {
    $('#element3').hide();
    $('#element1').click(function () {
        $('#element3').toggle(400);
        $('#element2').toggle(400);
    }); 
}); 

另请参阅此链接以获取更多信息。

Answer 3

试试这个

<script>
     $(document).ready(function(){
       $('#element1').click(function(){
         $('#element3').toggle();
         $('#element2').toggle();
       }); 
    });
</script>