1

私は Drupal を実行しており、「CSS ファイルの集約と圧縮」と「JavaScript ファイルの集約」を有効にしています。次のjQueryを使用して、要素の1つにクラスを追加していますが、これは完全に機能します。

ただし、「CSS ファイルを集約して圧縮する」を有効にすると、IE7 および IE8 で目的の結果が得られません。Firefox、Safari、Chrome で正常に動作します。

Drupal は圧縮された CSS を動的に生成し、新しいディレクトリに配置します。

これが私のjQueryです： 

(function ($, Drupal, window, document, undefined) {


    $(document).ready(function(){
        // ADD CLASS TO MAIN MENU ITEM WHEN CHILD UL IS HOVERED //
        $("#menu-218-1 ul").hover( 
            function(){ $("li#menu-218-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-218-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-539-1 ul").hover( 
            function(){ $("li#menu-539-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-539-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-540-1 ul").hover( 
            function(){ $("li#menu-540-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-540-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-545-1 ul").hover( 
            function(){ $("li#menu-545-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-545-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-546-1 ul").hover( 
            function(){ $("li#menu-546-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-546-1 a.sf-depth-1").removeClass('submenu_hover') }
        )
        $("#menu-547-1 ul ").hover( 
            function(){ $("li#menu-547-1 a.sf-depth-1").addClass('submenu_hover') },
            function(){ $("li#menu-547-1 a.sf-depth-1").removeClass('submenu_hover') }
        )

    });


})(jQuery, Drupal, this, this.document);

これが私のCSSです：

.submenu_hover {
    background:  #888888 url(../images/arrow.png) no-repeat 97px 0px;
    border-left: #888888 solid 9999px;
    margin-left: -9999px;
} 

.lt-ie8 .submenu_hover {
    background:  #888888 url(../images/arrow.png) no-repeat 97px 0px;
    border-left: #888888 solid 9999px;
    margin-left: -960px;
}
4

1 に答える 1

0

集約された CSS と集約されていない CSS の両方を検証してみてください。表示された行の上に構文エラーがあり、それらがスキップされる可能性があります。

CSS に関連しているように見えますが、各 .hover() 呼び出しの後にセミコロンを追加してみてください。の欠如は、JS コンプレッサーをつまずかせている可能性があります。JS では技術的にはオプションですが、JS を圧縮して行を 1 つにまとめる場合は、セミコロンが必要になることがあります。

そして、wireyが言ったことは真実ですが、クラスを追加するには、phpまたはメニュー属性モジュールを使用する必要がある場合があります.

于 2012-10-25T22:58:55.943 に答える