Question

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

请参阅此fiddle

我想再次点击此按钮（按钮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 -->

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

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

Answer 2

如下：

$(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/

Answer 3

将图像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/

Answer 4

这个小提琴展示了如何轻松完成：{{3p>

注意我将图像css更改为display：none。

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

Answer 5

查看更新的小提琴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');
        }
    });


});

Answer 6

我将点击事件绑定到#button和#image，方法是向他们添加课程button;当您单击其中任何一个时，它将显示/隐藏图像。

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

请参阅fiddle

$(document).ready(function() {
    $('.button').click(function() {
        $('#image_1').toggle();
    });
});

Answer 7

只需将您的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');
});


});

Answer 8

我认为你必须触发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();
        });
    });
});

如果检查并触发按钮点击#image_1上的mousedown事件，我们已完成其他操作。

结帐小提琴：http://jsfiddle.net/eCCR6/16/

Answer 9

您还可以在fiddle中合并这两个选择器。

$('#button, #image_1').click(function() {
 // Your code 
});

Answer 10

使用jquery .prev（）或.next（）函数

Answer 11

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

#image_1
{
  pointer-events: none;
}

请参阅小提琴：http://jsfiddle.net/eCCR6/31/

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

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

如何在其他元素下定位元素？

11 个答案: