1

これは私のhtmlコードです

<ul class="dd-options dd-click-off-close">
    <li>
        <a class="dd-option"><label class="dd-option-text">Our Approach</label></a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Consultation & Customized Search</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Dating & Relationship Coaching</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">Testimonials</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Online Dating Support</label>
        </a>
    </li>
</ul>

出力：

Our Approach
  - Consultation & Customized Search
  - Dating & Relationship Coaching
Testimonials
  - Online Dating Support

しかし、私はそのようにする必要があります（ホバー親liがハイフン（ - ）liを表示した後）

   Our Approach
   Testimonials

Hover on  Our Approach want to show
- Consultation & Customized Search
- Dating & Relationship Coaching 
Hover on Testimonials want to show
- Online Dating Suppor
4

4 に答える 4

1

試す

$('.dd-options .dd-option-text').filter(function () {
    return $.trim($(this).text())[0] == '-';
}).closest('li').hide().addClass('minus');

$('.dd-options > :not(.minus)').hover(function () {
    $(this).nextUntil(':not(.minus)').show();
}, function () {
    $(this).nextUntil(':not(.minus)').hide();
})

デモ:フィドル

于 2013-10-24T06:17:59.117 に答える
0 
$('li label.dd-option-text').each(function () {
    if ($(this).text().indexOf('-') == 0) {
        $(this).closest('li').hide();
    }
});

参考文献

。の指標（）

于 2013-10-24T06:15:02.543 に答える
0

次のようなフィルターを使用してみてください。

$('li').find("label").filter(function () {
    return (this.textContent || this.innerText).indexOf('-') === 0;
}).closest('li').hide();

デモ

更新しました

<ul class="dd-options dd-click-off-close">
    <li>
        <a class="dd-option"><label class="dd-option-text">Our Approach</label></a>
        <ul>
            <li>
                <a class="dd-option">
                    <label class="dd-option-text">- Consultation & Customized Search</label>
                </a>
            </li>
            <li>
                <a class="dd-option">
                    <label class="dd-option-text">- Dating & Relationship Coaching</label>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a class="dd-option"><label class="dd-option-text">Testimonials</label></a>
        <ul>
            <li>
                <a class="dd-option">
                    <label class="dd-option-text">- Online Dating Support</label>
                </a>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.dd-options li ul {
    display:none;
}
a.dd-option{
    cursor:pointer;
}
ul.dd-options li a:hover + ul {
    display:block;
}

CSSを使ったデモ

于 2013-10-24T06:17:12.963 に答える
0

ここには 2 つのアプローチがあります。

li1 つは、既存の構造を維持し、それらの要素を非表示にする jQuery スクリプトを実行することです。

$(function(){
    $('li label.dd-option-text').each(function () {
        if ($(this).text().indexOf('-') == 0) 
            $(this).hide();
    });
});

2 番目のアプローチは、構造をこの場合に適したものに変更することです。

サブメニューであるその<ul>中に新しい要素をネストし、それらを css で非表示にすることをお勧めします。例えば：<li>

<ul class="dd-options dd-click-off-close"
    <li>
        <a class="dd-option"><label class="dd-option-text">Our Approach</label></a>
    </li>
    <li>
        <ul>
            <li>
                <a class="dd-option">
                    <label class="dd-option-text">- Consultation & Customized Search</label>
                </a>
            </li>
        </ul>

    </li>

私が言ったように、私は2番目のアプローチを好みます。

それが役立つことを願っています。

于 2013-10-24T06:19:06.887 に答える