Question

我有this FIDDLE

    <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>

点击，＆＃34; .sidebarmenu＆＃34;被切换了。我想要＆＃34; .image＆＃34;与div一起切换。我怎么能这样做？

Answer 1

要定位多个元素，请使用逗号,

分隔每个元素

例如：$('.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);

    });

DEMO

使用jquery toggle()

简化代码

$('.sidebarmenu, .image').toggle();

Answer 2

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

$('.sidebarmenu, .image').css({

Answer 3

你已经过于复杂了。这就是你想要的：

 $('#showmenu').click(function() {
     $('.sidebarmenu, .image').toggle();
 });

Answer 4

并将图像添加到选择器

 $('#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()功能 fiddle here

Answer 5

 $('#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);

    });

<强> Fiddle demo

Answer 6

Updated Fiddle

 $('#showmenu').click(function() {
    $('.sidebarmenu').toggle();
    $('.image').toggle();
 });

隐藏/同时显示div

6 个答案: