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

这里有两种方法。

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

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

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

建议在子菜单中嵌套一个新<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>

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

希望有帮助。

于 2013-10-24T06:19:06.887 回答