-1

我有这个小提琴

    <div class="sidebarmenu" style="position: absolute; left: -200000px">
         Show/hide div
    </div>
    <div class="image" style="position: absolute; left: -200000px">
        <img src="http://diymusician.cdbaby.com/wp-content/uploads/2012/07/Builder-of-the-House.jpg">
    </div>

单击时，“.sidebarmenu”被切换。我希望“.image”与 div 一起切换。我怎样才能做到这一点？

4

6 回答 6

2

要定位多个元素，请用逗号分隔每个元素,

例如：$('.sidebarmenu, .image')

 $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
        if(hidden){
            $('.sidebarmenu, .image').css({
                position: 'absolute',
                left: -200000
            })
        } else {
            $('.sidebarmenu, .image').css({
                position: '',
                left: 0
            })
        }
        $('.sidebarmenu, .image').data("hidden", !hidden);

    });

演示

使用 jquery toggle()简化代码

$('.sidebarmenu, .image').toggle();
于 2013-09-03T06:53:49.530 回答
2

您必须添加, .image到选择器。您的选择器应如下所示

$('.sidebarmenu, .image').css({
于 2013-09-03T06:54:48.530 回答
2

你把这件事复杂化了。这就是你想要的：

 $('#showmenu').click(function() {
     $('.sidebarmenu, .image').toggle();
 });
于 2013-09-03T06:55:18.133 回答
1

并将图像添加到您的选择器

 $('#showmenu').click(function() {
    var hidden = $('.sidebarmenu').data('hidden');
    $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
    if(hidden){
        $('.sidebarmenu,.image').css({
                     //-^^^^^^---here
            position: 'absolute',
            left: -200000
        })
    } else {
        $('.sidebarmenu,.image').css({
                      //-^^^^^^---here
            position: '',
            left: 0
        })
    }
    $('.sidebarmenu').data("hidden", !hidden);

});

建议你看看toggle()功能太 小提琴here

于 2013-09-03T06:54:30.673 回答
1 
 $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
        if(hidden){
            $('.sidebarmenu, .image').css({
                position: 'absolute',
                left: -200000
            })
        } else {
            $('.sidebarmenu, .image').css({
                position: '',
                left: 0
            })
        }
        $('.sidebarmenu, .image').data("hidden", !hidden);

    });

小提琴演示

于 2013-09-03T06:55:15.207 回答
0

更新小提琴

 $('#showmenu').click(function() {
    $('.sidebarmenu').toggle();
    $('.image').toggle();
 });
于 2013-09-03T06:57:38.443 回答