如果为null，则使用data-id显示none [英] display none if null using data-id

问题描述

我有一个菜单，列出显示其他列表中内容的项目。

I have a menu which list items which display the the content on the other list.

菜单

<ul id="gallery-list" style="display: none;">
        <li class="close"></li>
        <li data-id="9425"><strong>item 1</strong></li>
        <li data-id="9426"><strong>item 2</strong></li>
        <li data-id="9488"><strong>item 3</strong></li>
        <li data-id="9489"><strong>item 4</strong></li>
        <li data-id="9495"><strong>item 5</strong></li>
        <li data-id="9427"><strong>item 6</strong></li>
</ul>

CONTENT：

<ul id="gallery-container">
        <li data-id="9425">
            <h3 style="display: none;">Item 1</h3>
            <div class="content">Content here</div>
        </li>
        <li data-id="9426">
            <h3 style="display: none;">Item 2</h3>
        </li>
        <li data-id="9488">
            <h3 style="display: none;">Item 3</h3>
        </li>
        <li data-id="9489">
            <h3 style="display: none;">Item 4</h3>
        </li>
        <li data-id="9495">
            <h3 style="display: none;">Item 5</h3>
            <div class="content">Content here</div>
        </li>
        <li data-id="9427">
            <h3 style="display: none;">Item 6</h3>
            <div class="content">Content here</div>
        </li>
</ul>

在内容中有些 .content li 。如何使用data-id隐藏菜单部分中的项目？基本上，菜单中的项目只有在菜单的 .content

In the content some have .content in the li. How can I use the data-id in that to hide the item in the menu section? Basically items in the menu should only be display if it has a .content

OUTPUT

<ul id="gallery-list" style="display: none;">
        <li class="close"></li>
        <li data-id="9425"><strong>item 1</strong></li>
        <li data-id="9495"><strong>item 5</strong></li>
        <li data-id="9427"><strong>item 6</strong></li>
</ul>

或者这也应该没问题。

<ul id="gallery-list" style="display: none;">
        <li class="close"></li>
        <li data-id="9425"><strong>item 1</strong></li>
        <li data-id="9425" style="display:none;"><strong>item 2</strong></li>
        <li data-id="9425" style="display:none;"><strong>item 3</strong></li>
        <li data-id="9425" style="display:none;"><strong>item 4</strong></li>
        <li data-id="9495"><strong>item 5</strong></li>
        <li data-id="9427"><strong>item 6</strong></li>
</ul>

不要在内容中的项目总是 display：none; code> onload触发器。

Take not that Item in the content are always display:none; onload trigger.

也使用此脚本：

    $("#gallery-list li").click(function() {
        var id = $(this).data('id');
            $("#gallery-container").find('li').each(function() {
            $(this).find('.content').toggle($(this).data('id') === id);
            $(this).find('h3').toggle($(this).data('id') === id);
        });
    });
    window.onload = function () {
        $("#gallery-container li .content").css("display", "none");
        $("#gallery-container li h3").css("display","none");
        $("#gallery-container li p").css("display","none");
    }
    $('.gallery-menu h3, #gallery-list li').click(function(){
        $("#gallery-list, .gallery-menu h3").toggle();
    });

这控制列表的内容也会激活菜单。

This controls the contents of the list also activate the menu.

推荐答案

我的主意：

循环内容列表项，当没有 .content 删除相关菜单项。

My frist idea:
Loop the content list items and when no .content is available inside, remove the related menu item.

$(function() {
    $("#gallery-container li[data-id]").each(function() {
        if( $(".content", this).length == 0 ) {
            $("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
        }
    });
});

在注释中注意到@XerenNarcy，你甚至可以使用 ）和 has（）组合选择器：

As @XerenNarcy noticed in the comments, you can even use a not() and has() combined selector:

$(function() {
    $("#gallery-container li[data-id]:not(:has(.content))").each(function() {
        $("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
    });
});

而不是 remove（）使用 hide（）。

工作示例

Working example.

这篇关于如果为null，则使用data-id显示none的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！