Question

我是JS的新手，现在已经搜索了现有的解决方案了。我可能缺乏产生这种特定解决方案所需的术语。我正在尝试创建一系列具有活动状态的四个元素，其中只有一个元素可以一次处于活动状态，并在单击时打开下面的标题。我正在使用.addClass，.removeClass和.toggleClass的组合来实现此目标。

The result can be seen here. HTML很长，但如果需要，我可以在这里发布。

我几乎就在那里，但是一旦它打开，我就无法让标题区再次关闭。标题绝对位于相对父级内，因此不会影响父级本身的高度。我在元素.lcs-closed中使用removeClass #landercaptions在元素处于活动状态时打开此空间，但在没有元素处于活动状态时无法找到使其恢复的方法。

我正在考虑如下：＆＃34;如果没有元素具有类.sh-active，则将类.lcs-closed添加到#landercaptions元素。我尝试了.hasClass的各种用法，但在页面加载后找不到任何可用的东西。

这是我的代码：

<script type="text/javascript">
        $('#one').click( function() {
            $("#capone").toggleClass("lc-hidden");  
            $("#captwo, #capthree, #capfour").addClass("lc-hidden");
            $("#two, #three, #four").removeClass('sh-active');
            $("#one").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
        $('#two').click( function() {
            $("#captwo").toggleClass("lc-hidden");
            $("#capone, #capthree, #capfour").addClass("lc-hidden");
            $("#one, #three, #four").removeClass('sh-active');
            $("#two").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
        $('#three').click( function() {
            $("#capthree").toggleClass("lc-hidden");
            $("#capone, #captwo, #capfour").addClass("lc-hidden");
            $("#one, #two, #four").removeClass('sh-active');
            $("#three").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
        $('#four').click( function() {
            $("#capfour").toggleClass("lc-hidden");
            $("#capone, #captwo, #capthree").addClass("lc-hidden");
            $("#one, #two, #three").removeClass('sh-active');
            $("#four").toggleClass('sh-active');
            $("#landercaptions").removeClass("lcs-closed");
        } );
    </script>

当所有元素都处于非活动状态（标题区域已关闭）时，如何让此页面恢复为其加载的状态？

我知道问题可能出在我已经使用过的JS上，如果有必要，欢迎提出修改建议。

这里要求的

EDIT 也是html：

<div class="landercols">    
<div class="lcheader">
    <h1 class="center">GoParenting. For growing families.</h1>
</div>
<div class="onefourth">
    <div class="stepholder" id="one"></div>
    <div class="steptitle">
        <h3 class="center">About</h3>
    </div>
</div>
<div class="onefourth">
    <div class="stepholder" id="two"></div>
    <div class="steptitle">
        <h3 class="center">Asking</h3>
    </div>
</div>
<div class="onefourth">
    <div class="stepholder" id="three"></div>
    <div class="steptitle">
        <h3 class="center">Action</h3>
    </div>
</div>
<div class="onefourth">
    <div class="stepholder" id="four"></div>
    <div class="steptitle">
        <h3 class="center">And then...</h3>
    </div>
</div>
<div id="landercaptions" class="lcs-closed">
    <div class="landercaption lc-hidden" id="capone">
        <h5 class="center narrow">At GoParenting we specialise in working with families with children aged two to eighteen, and have worked with hundreds of parents with an extremely varied range of parenting issues. We share positive parenting strategies with mums and dads to help them manage their children’s behaviour and improve their family relationships.</h5>
        <a href="http://wpf.matmartin.co.uk/about">
            <div class="button" id="midfloat">
                <h6>About GoParenting</h6>
            </div>
        </a>
    </div>
    <div class="landercaption lc-hidden" id="captwo">
        <h5 class="center narrow">Parenting can be tough, but asking for help doesn’t have to be. Bringing up children is one of the hardest jobs we do in our lives but we don’t receive any training for it - we have to learn as we go. When you ask GoParenting for support you are taking a huge step toward becoming a stronger, happier parent.</h5>
        <a href="http://wpf.matmartin.co.uk/contact">
            <div class="button" id="midfloat">
                <h6>Contact us</h6>
            </div>
        </a>
    </div>
    <div class="landercaption lc-hidden" id="capthree">
        <h5 class="center narrow">When you ask GoParenting for help we will discuss how you would like us to support you. We will then create a tailored plan for you to follow, which will include weekly emails and calls. We will also follow up after support ends to see how things are going.</h5>
        <a href="http://wpf.matmartin.co.uk/how-it-works">
            <div class="button" id="midfloat">
                <h6>How it works</h6>
            </div>
        </a>
    </div>
    <div class="landercaption lc-hidden" id="capfour">
        <h5 class="center narrow">The GoParenting strategies we discuss are tailored to your needs. They are confidential and designed to help you with whatever changes you would like to make right now. They will also be invaluable in helping you to support your children long into the future as they grow and develop.</h5>
        <a href="http://wpf.matmartin.co.uk/testimonials">
            <div class="button" id="midfloat">
                <h6>How we've helped other parents</h6>
            </div>
        </a>
    </div>
</div>

Answer 1

要查看页面上是否存在具有给定类的元素，您需要检查返回的jQuery包装器中有多少项

if ($(".sh-active").length == 0) { 
  //... 
}

对于@ user5014677：!$(".sh-active") - 始终评估为false。

＆＃13;

console.log($(".existing-class").length);
console.log(!$(".existing-class"));
console.log($(".non-existing-class").length);
console.log(!$(".non-existing-class"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="existing-class"></div>

＆＃13;

由于希望在接受的答案中得到结果代码，我在这里包含来自@ mtm的回复片段：

$('#one').click( function() {
    $("#capone").toggleClass("lc-hidden");  
    $("#captwo, #capthree, #capfour").addClass("lc-hidden");
    $("#two, #three, #four").removeClass('sh-active');
    $("#one").toggleClass('sh-active');
    $("#landercaptions").removeClass("lcs-closed");
    if ($(".sh-active").length == 0) { 
        $("#landercaptions").addClass("lcs-closed");
    }
} );

如果页面上没有特定的类，则为addClass

1 个答案: