9

私はワードプレス 3.5 を使用しており、サブメニューを含むメニューを作成しています。次のように構成されています。

<ul class="menu">
    <li id="menu1">Menu 1</li>
    <li id="menu2">Menu 2</li>
    <li id="menu3" style="z-index:100;">
        Menu 3
        <ul class="submenu">
            <li id="submenu1">submenu1</li>
            <li id="submenu2">submenu2</li>
            <li id="submenu3">submenu3</li>
        </ul>
    </li>
</ul>

問題は、サブメニューのあるメニューです。値 100 の z-index が自動的にアタッチされます。これらのメニューにラバランプ効果を追加する際に問題が発生するため、そのようにしたくありません。

次のように wp_nav_menus を使用してメニューを作成した直後に、jquery を使用して z-index を編集しようとしました。

jQuery(document).ready(function(){
     jQuery("#menu3").css("z-index", "0");
});

しかし残念ながら、それはうまくいきません。そのインラインCSSスタイルを削除するにはどうすればよいですか?

4

4 に答える 4

23

removeAttributeJavaScript で手動で追加したインライン スタイルをすべて削除する場合は、このメソッドを使用します。

element.removeAttribute("style")
于 2013-01-17T16:33:04.920 に答える
5

z-indexを初期値にリセット

z-indexを初期値にリセットするだけでli、スタイル宣言がない場合と同じように動作します。

$(function(){
    $('#menu3').css('z-index', 'auto');
});

バニラに行き、プレーンなjavascriptを使用できます（メニューのhtmlがロードされた後にコードを実行する必要があります）：

// If you're going for just one item
document.querySelector('#menu3').style.zIndex = 'auto';

スタイル属性を削除

jQueryを使用して、すべてのリストからスタイル属性を削除できます。

注：これにより、style属性を使用して要素に設定されているすべてのスタイルが削除されることに注意してください。

$(function(){
    $('#menu3').removeAttr('style');
});

またはバニラ：

// Vanilla
document.querySelector('#menu3').style = '';
于 2013-01-17T16:43:22.783 に答える
2

すべてのインライン スタイルを削除する場合は、Pranay の答えが正しいです。

$("#elementid").removeAttr("style")

z-index などのスタイル プロパティを 1 つだけ削除する場合は、それを空の値に設定します。

$("#elementid").css("zIndex","")

jQuery ドキュメント ( http://api.jquery.com/css/ ) から:

スタイル プロパティの値を空の文字列に設定すると (例: $('#mydiv').css('color', ''))、そのプロパティが既に直接適用されている場合は、HTML スタイルであるかどうかにかかわらず、要素からそのプロパティが削除されます。属性、jQuery の .css() メソッド、またはスタイル プロパティの直接 DOM 操作を介して。

于 2013-01-17T16:45:52.137 に答える
0

これは、スタイル属性全体ではなくz-indexスタイルのみを削除するため、私がより良いアプローチと考えるものです。これが動作中のフィドルです。

//As commented by @DA this is enough
$("#elementid").css("zIndex","")

//this could be useful in another situation so I will leave it :) 
$(document).ready(function () {
  $('#menu3').attr('style', function(i, style){
    return style.replace(/\z-index\b[^;]+;?/g, '');
  });
});

それが役に立てば幸い。

于 2013-01-17T16:44:04.247 に答える