1

我可以单击一个按钮（按钮 A）并使用一些 jquery 使图像在此按钮上的完全相同位置（位置：绝对）可见。

看到这个小提琴

我想再次单击此按钮（按钮 A）以隐藏图像，但我不知道如何隐藏图像，因为图像位于按钮上方。

我找到了其他解决方案（更多 jquery 或使用不可见的图像按钮），但我想找到一种更优雅的方式。

如何定位图像下方的按钮？

jQuery代码：

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        } else {
            $('#image_1').css('visibility', 'hidden');
        }
    });
});

CSS：

#button
{
    width:100px;
    background-color:#666666;
    height:25px;
    position:absolute;
    left:10px;
    top:10px;
}

#image_1
{
    width:100px;
    background-color:#666666;
    height:25px;
    position:absolute;
    left:10px;
    top:10px;
    visibility:hidden;
}

html

<div id=main>
    <div id="button">
    </div>
    <div id="image_1">Hello World!
    </div>
</div><!-- main -->

@closure @Justin John @Jai @Robz @Adam @Happy Singh @Ross Dargan @Wouter de Kort @Viral Patel @Ruben Stolk 谢谢你所有有趣的回答。很难选择，因为有一些非常好的。我选择了亚当的答案，因为它是最简单的（只是使用 toglle jQuery 和一个 css 类）。如果您认为您的答案更好，请在此处发表您的论点。

4

11 回答 11

1

请参阅小提琴http://jsfiddle.net/eCCR6/2/。

我已经创建了这样的函数，并绑定到两者：

function clickFn() {
    if ($('#image_1').css('visibility') == 'hidden') {
        $('#image_1').css('visibility', 'visible');
    } else {
        $('#image_1').css('visibility', 'hidden');
    }
}

另一个模型是将您的事件绑定到父 div main。

见小提琴http://jsfiddle.net/eCCR6/18/

于 2012-12-21T11:48:51.777 回答
1

怎么样：

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        $('#image_1').show();
    });

    $('#image_1').click(function() {
       $(this).hide();
    });
});​

检查这个演示：http: //jsfiddle.net/viralpatel/R5MVD/1/

于 2012-12-21T11:49:35.427 回答
1

将图像 div 放在按钮 div 中更容易。您还可以使用 jQuery 切换功能来显示/隐藏图像。

<div id=main>
    <div id="button">
       <div id="image_1">Hello World!
       </div>    
    </div>
</div><!-- main -->    ​

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        $('#image_1').toggle();
    })
});​

这是一个显示它的小提琴：http: //jsfiddle.net/jBaWN/2/

于 2012-12-21T11:51:21.793 回答
1

这个小提琴展示了它是如何轻松完成的：http: //jsfiddle.net/33aus/1/

请注意，我将图像的 css 更改为 display:none。

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(toggleVisiblity);
    $('#image_1').click(toggleVisiblity);
});
function toggleVisiblity()
{    
    $('#button').toggle();
    $('#image_1').toggle();
}​
于 2012-12-21T11:51:22.333 回答
1

请参阅更新的小提琴http://jsfiddle.net/eCCR6/8/

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        }
    });
    $('#image_1').click(function() {
        if ($('#image_1').css('visibility') == 'visible') {
            $('#image_1').css('visibility', 'hidden');
        }
    });


});
于 2012-12-21T11:51:44.603 回答
1

我通过将类添加到它们两者来将点击事件绑定到两者#button；当您单击任一时，它将显示/隐藏图像。#imagebutton

此外，如果您使用 jQuery 的toggle()display: none代替，则可以节省几行代码。visibility: hidden

看小提琴

$(document).ready(function() {
    $('.button').click(function() {
        $('#image_1').toggle();
    });
});
于 2012-12-21T11:53:04.743 回答
1

只需将您的javascript更改为

$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
    if ($('#image_1').css('visibility') == 'hidden') {
        $('#image_1').css('visibility', 'visible');
    } else {
        $('#image_1').css('visibility', 'hidden');
    }
});
$('#image_1').click(function(){
          $('#image_1').css('visibility', 'hidden');
});


});
于 2012-12-21T11:56:36.383 回答
1

我认为您必须在img 1尝试此操作时触发 mousedown 按钮：

  $(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        } else if ($('#image_1').css('visibility') == 'visible') {
            $('#image_1').css('visibility', 'hidden');
        }

        $('#image_1').mousedown(function(){
           $('#button').click();
        });
    });
});

在这里，我们已经完成了 1 else if 检查并触发按钮单击 mousedown 事件#image_1。

签出小提琴：http: //jsfiddle.net/eCCR6/16/

于 2012-12-21T11:59:47.787 回答
1

您也可以在fiddle中像这样组合两个选择器。

$('#button, #image_1').click(function() {
 // Your code 
});
于 2012-12-21T12:01:10.983 回答
0

使用 jquery .prev() 或 .next() 函数

于 2012-12-21T11:47:39.657 回答
0

pointer-events您可以使用CSS 属性使图像对点击不响应，而不是使图像响应单击（当图像下方有多个按钮时，这不起作用） 。它看起来像这样：

#image_1
{
  pointer-events: none;
}

见小提琴：http: //jsfiddle.net/eCCR6/31/

这将导致点击通过图像直接传递到下面的按钮。

这种方法的缺点是图像不再响应鼠标移动，但在这种情况下，没关系。

于 2013-12-24T05:43:27.430 回答