javascript - divの再配置

Question

divを再配置しようとしています-ヘッダーが「WhyBother」の拡張可能なパネルなので、ディスプレイの現在の場所（下部）に表示されます。しかし、HTMLでは、8つのパネルの上部に表示したいと思います。

（これらのパネルはコンテンツエリアのRH側のすべてにあります。これは、現在のサイトのSEOを維持するために行っています。これは、私がこれを構築している人が99％のお金を稼ぐ場所です）。

私はbottom：0を使用してみました。ただし、これは拡張可能なパネルでは機能しません。CSSまたはJSを使用してこれを行う方法はありますか？

score 0 · Accepted Answer

フィドルでこの例を実行する前にjQueryを使用してください

$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));

score 0 · Accepted Answer

絶対配置で目的を達成できます。この後、ドロップダウンが機能するかどうかはわかりませんが、試してみる価値はあります。

これを既存のcontentLeftCSS ルールに追加します

.contentLeft {
    padding-bottom: 90px;
    position: relative;
}

これを「特別な」divに追加します

.specialdropdownPanel {
    bottom: 20px;
    position: absolute;
}

score 0 · Accepted Answer

SEO の理由で上部に表示したい場合は、HTML コードの上部に移動する必要があります。SEO スパイダーは元の HTML に表示される方法で DOM を読み取るため、DOM の読み込み後に (JS または CSS のいずれかを使用して) 移動しても、SEO には影響しません。

上部に移動したら、javascript を使用して下部に移動すると、下部にあるように見えます。

<div class="contentLeft"それがclassの最初の div 要素であると仮定するとdropdownPanel、次の jQuery を使用できます。

$(document).ready(function(){
    $('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});

これが実際の例です：

あなたのサイト$で jQuery のショートカットが無効になっていることに気付きました。必ず次のものに置き換えてjQueryください。

jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');

3 に答える 3