4

HTML を直接変更できないように、既存のサイトに追加する拡張機能を作成しています。基本的に、スペースだけで区切られた単一の div に含まれる一連のリンクがあります。jquery を使用して、このシリーズの任意の場所に独自のリンクを追加し、右クリック コンテキスト メニューのように、リンクのすぐ隣に小さなメニューを開こうとしています。リンク/メニューのホバー フォーカスがなくなると、消えるはずです。

実際の動作のためにjqueryを処理できますが、このメニューのhtmlをドキュメントのどこに配置する必要があるかについて少し心配です。それは体の最後にあるべきですか？リンクの直前/直後？そして、リンクの上にカーソルを置いたときに、この要素の正しい位置を取得するにはどうすればよいですか? 例を見つけましたが、それらはすべてリストを使用しています。リンクの横に表示されるリンク ホバーのメニューが必要なだけです。

要するに、私の主な関心事は、リンクの横にポップアップ div を正しく配置する方法です。それに続いて、リンクの代わりにメニューにカーソルを合わせようとしたときに、メニューを開いたままにする方法があります。

これは、何をすべきかわからない前に、どこまで到達できるかです: http://jsfiddle.net/jRpyp/

$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | <a href=\"#\" id=\"popup-link\">My text</a> | ");
$("#popup").toggle();
$("#popup-link").hover(
    function(e)
    {
        $("#popup").show();
    },
    function(e)
    {
        $("#popup").fadeOut("slow");
    });

そしてHTML：

<div class="menu">
    <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> <br />
    <a href="#">More links</a> | <a href="#">More links</a> | <a href="#">More links</a> | <a href="#">More links</a>
</div>
<div id="popup">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
    </ul>
</div>
4

3 に答える 3

0

まず、 の#popupような位置に設定する必要がありますabsolute。これにより、HTML のどこに表示されても、ページのどこにでも配置できます。

これは、使用する必要がある基本的な jQuery です1

function (e) {
    var pos = $(this).position(); // Gets the position of the link
    var width = $(this).outerWidth(); // Gets the width of the link
    $("#popup").css({
        top: pos.top + "px", // Uses the top positioning of the link to put it in the same area
        left: (pos.left + width) + "px" // First puts the menu in the same leftward position of the link, then adds the width to prevent overlap
    }).show();
}

これにより、リンクがどこにあっても、リンクの近くに表示されます。

リンクとメニューの間にスペースを追加したい場合は、単純な追加+と数字

例えば

left: (pos.left + width + 10) + "px" // Would add 10 extra pixels, so it doesn't look like they are right next to each other
top: (pos.top + 20) + "px" // Adds 20 extra pixels

フィドル

1: https://stackoverflow.com/a/158176/1470950提供

于 2013-07-01T05:41:30.673 に答える
0

このhttp://jsfiddle.net/jRpyp/4/スクリプトの更新バージョンに似たものが必要ですか?

$("#popup").toggle();
$(".menu a").hover(function (e) {

// change selected a-tags css to get a margin

$("#popup").css({
    position: "absolute",
    top: 50 + "px", // based on the position of the selected a-tag
    left: 100 + "px" // based on the position of the selected a-tag
}).show();
},

function (e) {
    $("#popup").fadeOut("slow");
});

あなたの質問の1つに関して：

実際の動作のためにjqueryを処理できますが、このメニューのhtmlをドキュメントのどこに配置する必要があるかについて少し心配です。それは体の最後にあるべきですか？リンクの直前/直後？

html をどこに配置するかは問題ではありません。これは、その唯一の用途がサイド内の (決められた位置に) 表示されるためです。多くの場合、このような html をドキュメントの最後に、id のようなテンプレートを持つ div 内にネストすると思います (jQuery で簡単にアクセスするため)。

（質問が正しかったことを願っています。）

于 2013-07-01T06:14:52.817 に答える