Question

我想通过点击<p>在#info中显示h1，在显示之后我想再次点击h1再隐藏它。谢谢你的帮助！

HTML

<article id="info">
    <h1>Lerem ipsum<i class="icon-up-open-big"><!--arrow!--></i></h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur
        ligula vel nunc ultricies, nec iaculis libero bibendum. Vestibulum eu lorem
        faucibus, eleifend justo non, bibendum leo. Cras in nulla pharetra, tristique
        felis et, vulputate mauris. Ut vitae nunc in massa rhoncus tempus fringilla
        congue sem. Sed est eros, maximusn eget turpis ut, porttitor vehicula metus. Fusce
        neque turpis, venenatis eu auctor non, malesuada at sapien. Phasellus orci arcu,
        bibendum eu ultrices non, blandit quis enim. Interdum et malesuada fames ac ante
        ipsum primis in faucibus. Sed feugiat augue vitae leo accumsan, vitae tempor velit
        interdum.
</article>

的JavaScript

var open = 0;

jQuery(function($) {
    if(open == 0) {
        $('#info').click(function() {
            $(this).css('cursor', 'default');
            $('#info h1').css('cursor', 'pointer');
            $('#info p').slideDown(1000);
            $('#info i').animate({rotate: '180'}, 2000, 'linear', function() {rotate();});
            var open = 1;
        });
    }
    else if (open == 1) {
        $('#info h1').click(function() {
            $('#info p').slideUp(1000);
            var open = 0;
        });
    }
});

CSS

#info {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-family: 'Oswald', sans-serif;
    margin-top: 110px;
    margin-bottom: 0;
    padding-bottom: 80px;
    font-size: 50px;
    width: 75vw;
    letter-spacing: 1px;
    font-weight: normal;
    cursor: pointer;
}

#info h1 {
    font-size: 175%;
    text-decoration: none;
    font-weight: normal;
    margin: 0;
}

#info p  {
    text-align: justify;
    font-size: 85%;
    margin-top: 10px;
}

Answer 1

您可以使用toogleClass方法，如果您想要转换，可以使用更多css。

＆＃13;

{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-family: 'Oswald', sans-serif;
    margin-top: 110px;
    margin-bottom: 0;
    padding-bottom: 80px;
    font-size: 50px;
    width: 75vw;
    letter-spacing: 1px;
    font-weight: normal;
    cursor: pointer;
}

#info h1
{
    font-size: 175%;
    text-decoration: none ;
    font-weight: normal;
    margin:0;
}

#info p 
{
    text-align: justify;
    font-size: 85%;
    margin-top: 10px;
}

.show{
  display:block
}

.hide{
  display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="info">
            <h1>Lerem ipsum<i class="icon-up-open-big"><!--arrow!--></i></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur ligula vel nunc ultricies, nec iaculis libero bibendum. Vestibulum eu lorem faucibus, eleifend justo non, bibendum leo. Cras in nulla pharetra, tristique felis et, vulputate mauris. Ut vitae nunc in massa rhoncus tempus fringilla congue sem. Sed est eros, maximus eget turpis ut, porttitor vehicula metus. Fusce neque turpis, venenatis eu auctor non, malesuada at sapien. Phasellus orci arcu, bibendum eu ultrices non, blandit quis enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed feugiat augue vitae leo accumsan, vitae tempor velit interdum.
        </article>

＆＃13;

IntentSchema.json

＆＃13;

Answer 2

$(document).on('click', 'h1', function(){
  $('p').toggle();
})

以下是一些可以与切换方法一起使用的动画：docs 或者您可以使用.slideToggle()

jQuery当函数activate时，使另一个函数可用

2 个答案: