Question

我正在学习JQuery并理解我在下面编写的内容，因为它完美无缺。对我来说这很简单，但似乎有些凌乱。是否有更简单的方法来简化或组合功能来实现相同的结果。这是在点击图像时显示和隐藏不同的DIV。

<script type="text/javascript">

$(document).ready(function(){ 

    $('#leftcolumn').hide();
    $('#2d').hide();
    $('#development').hide();
    $("#HideFlash").click(function () {
        $('#movie').toggle("slow");
        $('#leftcolumn').toggle('slow');
            return false;

        })
    });

    $('#leftcolumn').toggle('slow');


    $(document).ready(function () {
    $(".img1").click(function () {
        $('#2d').toggle("slow");
            return false;

    })
});

    $(document).ready(function () {
    $(".img2").click(function () {
        $('#development').toggle("slow");
            return false;

    })
});
</script>

HTML

<div id="container">


<div id="body" align="center">
<a id="HideFlash" href="#">hide video</a>
<div id="movie">

flash object movie here

</div>  
</div>


<div id="leftcolumn"> 
    <h1>Stephen Carl Willis:<br> 
    Web Developer/Designer</h1> 
    <ul>
    <li><img src="<?php echo base_url();?>/assets/images/close.png" alt="2d" class="img1">2D</></li>
    <li><img src="<?php echo base_url();?>/assets/images/close.png" alt="2d" class="img2">Development</></li>
    </ul>
    </div>


<div id="2d">
Here is my 2D graphic design. This includes vector, flash, ect.
</div>
<div id="development">
Here is my development portfolio.
</div>

Answer 1

人们使用像jsfiddle.net这样的工具来发布问题或问题的例子。这是你在小提琴中整理时的样子：http://jsfiddle.net/rJ8XR/

$(document).ready(function(){  
    $('#leftcolumn').hide();
    $('#2d').hide();
    $('#development').hide();
    $("#HideFlash").click(function () {
        $('#movie').toggle("slow");
        $('#leftcolumn').toggle('slow');
        return false;
    })
    $('#leftcolumn').toggle('slow');

    $(".img1").click(function () {
        $('#2d').toggle("slow");
        return false;

    })
    $(".img2").click(function () {
        $('#development').toggle("slow");
        return false;
    });
});

...删除了额外的$(document).ready()处理程序，并清理了一些html

jquery显示/隐藏功能的简短方法

1 个答案: