如何在單擊用戶照片時顯示上下文類型菜單，每頁有多個用戶照片？

我需要幫助，我需要製作一個菜單，只顯示當你點擊一個圖標時，我需要將菜單直接放置在圖像div的右側。那麼有人可以看看提供的鏈接，並幫助我將菜單div放在照片div旁邊嗎？如何在單擊用戶照片時顯示上下文類型菜單，每頁有多個用戶照片？

然後，可能會顯示一個最佳方法的示例，以在點擊時顯示/隱藏菜單div以及在菜單區域外單擊時如何隱藏它。最好的辦法是爲每個用戶創建菜單，如果頁面上有20個用戶，我應該創建20個隱藏菜單嗎？任何幫助讚賞我知道這個問題有點像我只是懶惰，但我真的不知道如何定位div的方式，我需要它和至於顯示/隱藏它，我不知道最好的方法，當它需要在1頁上有許多菜單。

http://friendproject.isgreat.org/contextmenu.php

來源

2009-09-20 JasonDavis

你必須

float: left;

應用CSS的形象，以及像你的Photoshop處理圖像元素位置的菜單。

我認爲最簡單的選擇是確實在每張圖片旁邊創建一個菜單。你將不得不隱藏與

display: none

菜單並可以切換使用jQuery的toggle可見度（）函數是這樣的：

$("image1").click(function() { 
    $('#menu1').toggle(); 
});

來源

2009-09-20 21:11:59 richard

我用你的建議，這裏是結果http://jsbin.com/epidu它沒有正確定位我以前想要的位置，而是位置低於div，但我喜歡這個看起來也是如此。我現在唯一的問題是我不認爲切換是答案，我的意思是我想要保持切換，但如果我點擊屏幕上的任何地方，也會使其切換，任何想法如何做到這一點？ – JasonDavis 2009-09-20 21:30:08

另外我需要使jquery更具動態性，如果在1頁上有20個用戶，那麼jquery部分將不會非常高效，因爲每張照片和菜單都會有唯一的ID，例如userid「menu_USERIDHERE」和「photo_USERIDHERE」 – JasonDavis 2009-09-20 21:32:53

我要去，因爲所有這些信息的沒有按添加另一個答案不適合發表評論。

因爲float：left;應用於包裝圖像和菜單的元素。他們需要浮動應用分開（我認爲這將工作，如果你將它應用到ImageSub而不是Photowrap）。

如果您希望菜單在您點擊屏幕上的任意位置時關閉，它將涉及退出大量工作。您還必須切換一個不可見/透明覆蓋層，以延伸至頁面的整個寬度和高度。最重要的是，菜單將被放置。通過疊加上的另一個onclick事件觀察器，菜單和疊加層都將被切換。該技術也用於燈箱。

疊加可以用下面的CSS創建：

position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;

一個更有效的方法，用於切換將使用jQuery「^」選擇。這裏有關於該主題的一個很好的教程：http://www.olliekav.com/2008/10/18/writing-multiple-toggle-links-in-jquery/

來源

2009-09-20 21:56:59 richard

如何在單擊用戶照片時顯示上下文類型菜單，每頁有多個用戶照片？

回答

相關問題