jquery - ドロップダウンメニューの疑似セレクタの問題

Question

3 レベルのドロップダウンメニューがあり、2 つの問題があります。

問題 1: 一部解決済み。以下の私の回答を参照してください アクティブな選択されたタグに、他のタブにカーソルを合わせたときと同じ青い下線の色を付けたいと思います...したがって、ホームページタブがアクティブな場合、別のタブまでホームタブに下線(border-bottom)を付ける必要があります1つが選択されています...

問題 2: サブメニュー項目のいずれかにカーソルを合わせると、必要に応じて下線 (border-bottom) が表示されますが、下線 (border-bottom) が親の li タグの背景よりも長い...どうすればよいですか私はそれらを並べますか？

また、サブメニュー項目の上にカーソルを置いているときに、「サービス」に下線を引くにはどうすればよいですか?

ここに私のフィドルがあります： http://jsfiddle.net/6aT9W/4/

HTML:

<div id="page-wrap">
        <ul class="dropdown">
            <li><a class="first" href="#">Home</a>
            </li>
            <li><a class="first" href="#">About Us</a>
            </li>
            <li><a class="first" href="#">Services</a>

                <ul>
                    <li>    <a href="#">Supply &amp; Distribution</a>

                        <ul>
                            <li><a href="#">Supply and distribution of industrial and raw materials including timber, machinery, equipment, fuel, technology and other resource.</a>
                            </li>
                            <li><a href="#">Supply of technological products including Information Technology and telecommunication equipment with integrated solutions.</a>
                            </li>
                        </ul>
                    </li>
                    <li>    <a href="#">Procurement &amp; Product Sourcing</a>

                        <ul>
                            <li><a href="#">Sourcing of industrial products for the industrial, energy and mining sectors.</a>
                            </li>
                        </ul>
                    </li>
                    <li>    <a href="#">Sales and Marketing</a>

                        <ul>
                            <li><a href="#">Sales, marketing and promotions including brand development strategies, research, demographic targeting.</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a class="first" href="#">Products</a>

                <ul>
                    <li><a>Caskets</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

CSS:

* {
    margin: 0;
    padding: 0;
}
#page-wrap {
    width: 800px;
    margin: 25px auto;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
p {
    margin: 15px 0;
}
/*
    BODY
*/
 #page-wrap {
    margin: 0 auto;
    width: 940px;
    height: 86px;
    border-bottom: 1px solid #bbb;
}
/* 
    LEVEL ONE
*/
 ul.dropdown {
    position: relative;
}
ul.dropdown li {
    font-weight: bold;
    float: left;
    zoom: 1;
}
ul.dropdown a:hover {
    color: #000;
}
ul.dropdown li.active a {
    color: #ffa500;
}
ul.dropdown li a {
    display: block;
    padding: 29px 8px;
    color: #222;
    font- size: 18px;
    font-family:'Open Sans', Sans-Serif;
    border-bottom: 6px solid transparent;
}
ul.dropdown li:last-child a {
    border-right: none;
}
/* Doesn't work in IE */
 ul.dropdown li.hover, ul.dropdown li:hover {
    background: #f1f1f1;
    color: black;
    position: relative;
}
ul.dropdown li.hover > a, ul.dropdown li > a:hover {
    color: black;
    border-bottom: 6px solid #003399;
}
/* 
    LEVEL TWO
*/
 ul.dropdown ul {
    width: 230px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}
ul.dropdown ul li {
    background: #fafafa;
    font-weight: normal;
    color: #000;
    float: none;
    border-bottom: 1px solid #ccc;
}
/* IE 6 & 7 Needs Inline Block */
 ul.dropdown ul li a {
    border-bottom: 6px solid transparent;
    border-right: none;
    width: 100%;
    display: inline-block;
    padding: 8px 8px;
    font-size: 14px;
}
/* 
    LEVEL THREE
*/
 ul.dropdown ul ul {
    left: 100%;
    top: 0;
}
ul.dropdown li:hover > ul {
    visibility: visible;
}

ありがとうございました

score 1 · Accepted Answer

OK、次の JS と CSS を追加して、アクティブなタブの問題の解決策を見つけました。

ul.dropdown li.active a{ 
                          color: #000; 
                          border-bottom: 6px solid #003399; 
                          background: #f1f1f1;
}

JS

$(document).ready(function(){
    $('.dropdown > li').click(function() {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    });
});

ただし、1 つの問題が残っています。[サービス] をクリックすると、すべてのサブメニューにも下線が引かれます。ホバーされている下線付きで強調表示されているものだけが必要です（サブメニューの場合...）

.siblings JQuery メソッドと関係があると思います...

JFiddle を更新しました

score 1 · Accepted Answer

クラスを切り替えるには、マークアップを変更するか、クリックハンドラーを追加する必要があります。li.active クラスが定義されているようです。メニュー項目ごとに個別のページ/URL/リクエストである場合は、.activeクラスを追加する最上位メニューをサーバーに決定させます。ページコンテンツを AJAX 処理している場合は、ajax 呼び出しにフックして、正しいタブでクラスを切り替える (そして他のタブから削除する) 必要があります。単一ページのコンテンツの場合 (つまり、すべてを一度にロードし、下に表示される適切なタブを js/jquery/dhtml で実行するだけ)、そこにフックを配置します。
これはトリッキーです...それは要素のwidth: 100%ルールに関係しています。aそれを縮小すると、ボーダーがそれほどオーバーフローしていないことがわかります。パーセントは... 頼りにするのが悪いので、それを使用することはお勧めしません。含まれているの幅を設定するものは何も表示されないliため、ボックスモデルが混乱している可能性があります。

ああ、私はあなたがこのルールを持っていることがわかりました

ul.dropdown ul {
  width: 230px;

a のパディングと組み合わせる

ul.dropdown ul li a {
    border-bottom: 6px solid transparent;
    border-right: none;
    width: 100%;
    display: inline-block;
    padding: 8px 8px;

内側の幅を 230px (含まれる li の 100%、含まれる ul の 100%) に設定し、左右に 8px のパディングを追加して、境界線がまたがる幅の合計を 246px にします。合わない。したがって、幅を 214px、+ 8px の左パディング + 8px のパディング右 = 230px に変更します。

3 ホバリングセレクターを変更します。li:hover > aの代わりにセレクターを使用します。li > a:hover

ul.dropdown li.hover > a, ul.dropdown li:hover > a {
    color: black;
    border-bottom: 6px solid #003399;
}

更新：違い。

li:hover > aliホバーされている要素内の任意のアンカータグに一致します。Services & Productsliには入れ子になったulwithが含まれているため、その子要素にカーソルを合わせるとa、外側はまだ上に置かれています。liそして、サービスと製品のテキスト自体がアンカーなので、ルールに一致して境界線を取得します。

これらの変更でフィドルを更新しました（JavaScriptの変更はありません。メニュー項目のページにコンテンツを配置する方法を教えていただければ、より適切に取り組むことができます）：http://jsfiddle.net/6aT9W/5/

jquery - ドロップダウン メニューの疑似セレクタの問題

2 に答える 2

Related

Reference

jquery - ドロップダウンメニューの疑似セレクタの問題