如果使用data-id為null，則不顯示任何內容

Question

我有一個菜單，其中列出了在其他列表上顯示內容的項目。

菜單

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

內容：

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

在內容中，某些內容在li具有.content 。 如何在其中使用data-id隱藏菜單部分中的項目？ 基本上，菜單中的項目只有在具有.content才應顯示

MENU的輸出應該是這樣的。

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

不要認為內容中的Item總是display:none; 加載觸發器。

還使用此腳本：

    $("#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();
    });

這樣控制列表的內容還可以激活菜單。

Answer 1

我的第一個主意：
循環內容列表項，並且當內部沒有.content時，請remove相關的菜單項。

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

正如@XerenNarcy在注釋中所注意到的，您甚至可以使用not()和has()組合選擇器：

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

您甚至可以使用hide()代替remove() hide() 。

工作示例。