如何定位另一個元素下的元素？

我可以點擊一個按鈕（按鈕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 -->

@closure @Justin約翰@Jai @Robz @Adam @Happy辛格@Ross Dargan酒店@Wouter de Kort @Viral Patel @Ruben Stolk 謝謝你的所有有趣答案。選擇很難，因爲有一些非常好的選擇。我選擇了Adam的答案，因爲它是最簡單的（正確使用toglle jQuery和一個css類）。如果你認爲你的答案更好，請在這裏發表你的論點。

來源

2012-12-21 Sébastien Gicquel

你怎麼可以點擊一個按鈕，你看不到？乖乖你想點擊img !? – Liam

該按鈕＃鍵與背景色：＃666666;你可以看到。我已簡化了示例，但在我的項目中有兩個圖像（一個是按鈕，點擊後按鈕出現在按鈕上） –

您的圖像與您的按鈕大小相同，因此一旦圖像可見。這是你的設計問題。改變這一點，你應該可以點擊按鈕。 –

我綁定的Click事件到兩個#button和#image通過添加類button到他們兩個;當你點擊它時，它會顯示/隱藏圖像。

此外，如果您使用display: none而不是visibility: hidden，則可以使用jQuery的toggle()，這可以爲您節省幾行代碼。

看到fiddle

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

來源

2012-12-21 11:53:04

我接受你的答案，因爲我認爲這是最簡單的。但還有其他好的答案。謝謝。 –

使用jQuery的.prev（）或的.next（）函數

來源

2012-12-21 11:47:39

見小提琴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-21 11:48:51 closure

如何像：

$(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-21 11:49:35

小提琴不起作用，但我明白你的意思。我會嘗試。 –

對不起，我更新了網址。 http://jsfiddle.net/viralpatel/R5MVD/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-21 11:51:21

這撥弄瞭如何可以做到easliy：http://jsfiddle.net/33aus/1/

注意，我改變了圖像的CSS顯示：無。

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

來源

2012-12-21 11:51:22

尼斯。我已經測試過它，它只適用於顯示：無，不可見：隱藏;正確嗎？ –

此方法的作用是.toggle查找display：none，並切換它。 –

請參閱更新的小提琴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-21 11:51:44 w3uiguru

只是改變你的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-21 11:56:36

沒關係。我以前做過這個。它的工作原理，但我可以看到只有一個功能的答案。 –

我認爲你必須觸發img 1上鼠標按下按鈕試試這個：

$(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次，如果檢查並觸發按鈕點擊mousedown甚至t on #image_1。

結賬小提琴：http://jsfiddle.net/eCCR6/16/

來源

2012-12-21 11:59:47 Jai

您還可以在fiddle結合兩種選擇這樣的。

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

來源

2012-12-21 12:01:10

很高興使用這兩個選擇器。 –

反而使圖像變得響應點擊（其中當有圖像下面多個按鈕不起作用），你可以使圖像不響應使用pointer-events CSS屬性點擊。這將是這個樣子：

#image_1 
{ 
    pointer-events: none; 
}

見琴：http://jsfiddle.net/eCCR6/31/

這將導致點擊，直接通過圖像下方的按鈕。

缺點這種方法是圖像不再響應鼠標移動，但在這種情況下，那也沒關係。

來源

2013-12-24 05:43:27

如何定位另一個元素下的元素？

回答

相關問題