Question

我有元素（div），

命名：element1，element2，element3

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

这是我使用的代码

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

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

我的问题

如何使element2隐藏，点击时元素3可见在element1上？
我在element1中再次点击后如何恢复默认值？

Answer 1

尝试

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

演示：Fiddle

Answer 2

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

根据您的要求，当您点击element1时，element3和element2将分别在每次点击中切换。下面的代码应该可以解决您的问题。

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

有关详情，请参阅this link。

Answer 3

试试这个

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

用jquery显示/隐藏元素

3 个答案: