当其他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();

    });
});

这是最初为演示相同概念而制作的小提琴 。 仅作参考之用，因为它比您的问题更简单，但是仍然展示了如何解决有问题的问题。