Question

这是我的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）

之后

   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

Answer 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();
})

演示：Fiddle

Answer 2

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

参考

.indexOf()

Answer 3

尝试使用filter之类的，

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

Demo

<强>更新

<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;
}

Demo with css

Answer 4

这里有两种方法。

一个是保留现有结构，并运行一个隐藏这些li元素的jQuery脚本：

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

第二种方法是将结构改为适合这种情况的结构。

建议在<ul>内嵌套一个新的<li>元素作为子菜单，并使用css隐藏它们。例如：

<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>

正如我所说，我更喜欢第二种方法。

希望有所帮助。

隐藏子li以Hyphen（ - ）开头，并在jQuery中显示父li

4 个答案: