Question

在其他一些情况下，.toggle()命令工作正常。即使比较这些代码部分也没有解决问题所以我需要你的帮助！点击Learn more时，它必须消失，并且必须显示<c>中的文字。但它出现了一秒钟，之后就消失了。

提前致谢！

＆＃13;

$(document).ready(function() {
    $(".interests").click(function() {
        $(".interests").fadeToggle(300);
        $(".int").fadeToggle(300);
    });
});

＆＃13;

.supporting {
    padding-top: 80px;
    padding-bottom: 100px;

}

.supporting .col {
    float: left;
    width: 33%;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    margin-bottom: 24px;
}

.supporting img {
    height: 32px;
    margin-top: 40px;
}

.supporting h2 {
    font-weight: 600;
    font-size: 23px;
    text-transform: uppercase;
    padding: 0 50px;
    margin-bottom: 30px;
}

.supporting a {
    font-size: 10px;
    color: rgb(51,51,51);
    font-weight: 600;
    border: 1px solid rgb(51,51,51);
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.supporting .int c {
    font-size: 10px;
    color: rgb(51,51,51);
    padding: 15px 50px;
    text-align: center;
    vertical-align: middle;
}

＆＃13;

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<div class="supporting">
    <div class="container">
        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
            <h2>Support</h2>
            <p></p>
            <div class="interests">
                <a>Learn more</a>
                <div class="int" style="display:none">
                    <c>Lorem ipsum.</c>
                </div>
            </div>
        </div>
  </div>
</div>

＆＃13;

Answer 1

您只需要从div中删除interests类，并将相同的类添加到锚标记中。像是，

<div class="supporting">
    <div class="container">
        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg" width='20px'>
            <h2>Support</h2>
            <p></p>
            <div>
                <a class="interests">Learn more</a>
                <div class="int" style="display:none">
                    <c>Lorem ipsum.</c>
                </div>
            </div>
        </div>
  </div>
</div>

我已创建JSfiddle检查出来。

Answer 2

问题是你隐藏了整个容器而不是单个元素。

应该是这样的：

<div class="supporting">
    <div class="container">
        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
            <h2>Support</h2>
            <p></p>
            <div class="interests">
                <a class=learn-more">Learn more</a>
                <div class="int" style="display:none">
                    <c>Lorem ipsum.</c>
                </div>
            </div>
        </div>
  </div>
</div>

和您的代码如下：

$(document).ready(function() {
    $(".interests").click(function() {
        $(".learn-more").fadeToggle(300);
        $(".int").fadeToggle(300);
    });
});

您正在做的是隐藏整个.interests容器。这意味着即使.int和.learn-more可见;父类.interests不可见的事实意味着所有子元素和它自己的按钮不再可见。

因此，您也无法再次点击该按钮，因为它在页面上不再可见！

切换文本没有出现

2 个答案: