當其他jQuery隱藏時顯示一些div

Question

我希望當CATEGORY處於活動狀態時，要隱藏.closeorshow div。 如果未選擇類別，則應顯示.closeorshow div。

我用$(".closeorshow").hide()和.show()進行了一些測試，但我是jQuery的初學者，我無法弄清楚。 問題似乎是，每當我取消選擇任何類別而不是未選擇任何類別時， .closeorshow div就會重新出現。

這是一個小提琴 。

HTML：

<ul class="types">
    <li class="item" data-target="games">Games</li>
    <li class="item" data-target="music">Music</li>
    <li class="item" data-target="movies">Movies</li>
    <li class="item" data-target="ljudobild">Ljud & Bild</li>
</ul>
<div class="description" id="games">Description of Games</div>
<div class="description" id="music">Description of Music</div>
<div class="description" id="movies">Description of Movies</div>
<div class="description" id="ljudobild">Description of Television</div>

<br><br>

    <div class="closeorshow">
        This class are going to be SHOWN when NONE of the items are selected, and HIDED
        when one of the items is selected.
    </div>

JS：

$(document).ready( function() {
    $('.types li').click( function(t) {
        $('.closeorshow').hide();
        if ($(this).hasClass('active')) {
        $(this).removeClass('active');$(this).addClass('item');
        $('.closeorshow').show();
    } else {
        $(this).addClass('active');$(this).removeClass('item');
    }
        $('#'+$(this).attr('data-target')).toggle();
    });
});

Answer 1

基本思想是檢查類.active是否存在。 這是通過調用$(".active") ，它將生成一個數組，這意味着它可以訪問.length方法。 如果數組的length大於0，則不希望顯示.closeorshow ，因此請調用$(".closeorshow").hide() 。 否則，您確實希望顯示它，因此調用$("#.closeorshow").show() 。

告訴我一切是否都沒有。

小提琴

我只更改了您的JavaScript：

$(document).ready(function () {
    $('.types li').on("click", function () {
        $(this).toggleClass("active item");
        $('#' + $(this).attr("data-target")).toggle();

        if ($(".active").length === 0)
            $(".closeorshow").show();
        else
            $(".closeorshow").hide();

    });
});

這是最初為演示相同概念而制作的小提琴 。 僅作參考之用，因為它比您的問題更簡單，但是仍然展示了如何解決有問題的問題。