(JQuery) При щелчке div расширяется с переходом css

Question

Я хочу расширить и уменьшить высоту заголовка, когда я нажимаю на div «стрелка». Я пытался addClass с Jquery, но это действительно не работает HTML:

<header> 
    <p>The title..</p> 
    <h1>Some text</h1> 
     <div class="arrow" id="arrow"> 
     <img src="img/arrow.svg" /> 
     </div> 
</header> 

CSS

header { 
    background: #2282A4; 
    color: #fff; 
    text-align: center; 
    width: 100%; 
    height: 450px; 
    transition: height 0.5 ease; 
} 
expandheight { 
    height: 850px; 
} 

JQuery:

$(document).ready(function() { 
    $(function() { 
     $('#arrow').click(function() { 
     $('header').addClass('expandheight'); 
}); 
}); 
}); 

Я не знаю, как я теперь можно уменьшить высоту с помощью той же кнопки, чтобы удалить класс «expandheight», когда он активен, и добавить его, когда он не ... Я попытался, если/else, я потерпел неудачу.

Answer 1

У вас есть несколько синтаксических ошибок:

1. expandheight должен быть оформленным с использованием .expandheight
2. использовать кросс-браузер Свойство анимации
3. использования toggleClass для добавления/удаления класса

$(document).ready(function() { 
 
    $(function() { 
 
    $('#arrow').click(function() { 
 
     $('header').toggleClass('expandheight'); 
 
    }); 
 
    }); 
 
});

header { 
 
    background: #2282A4; 
 
    color: #fff; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 450px;  
 
    -webkit-transition:height 0.5s ease; 
 
    -moz-transition:height 0.5s ease; 
 
    transition:height 0.5s ease; 
 
} 
 

 
.expandheight { 
 
    height: 850px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<header> 
 
    <p>The title..</p> 
 
    <h1>Some text</h1> 
 
    <div class="arrow" id="arrow"> 
 
    <img src="img/arrow.svg" /> 
 
    </div> 
 
</header>

Answer 2

Если вы хотите расширить и уменьшить высоту заголовка, используйте toggleClass(), а не с помощью addClass()

jQuery(document).ready(function() { 
    jQuery(function() { 
     jQuery('#arrow').click(function() { 
      jQuery('header').toggleClass('expandheight'); 
     }); 
    }); 
}); 

Кроме того, у вас было несколько ошибок в коде. Я создал jsfiddle, чтобы показать вам, что он работает.

https://jsfiddle.net/7yodz723/

(я ставлю рамку вокруг стрелки, чтобы убедиться, мы можем ясно видеть пример рабочего)

Answer 3

Просто использовать класс тумблер для переключения классов.

$(document).ready(function() { 
 
    $(function() { 
 
    $('#arrow').click(function() { 
 
     $('header').toggleClass('expandheight'); 
 
    }); 
 
}); 
 
});

header { 
 
    background: #2282A4; 
 
    color: #fff; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 450px; 
 
    transition: height 0.5 ease; 
 
} 
 
.expandheight { 
 
    height: 850px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<header> 
 
    <p>The title..</p> 
 
    <h1>Some text</h1> 
 
    <div class="arrow" id="arrow"> 
 
    <img src="img/arrow.svg" /> 
 
    </div> 
 
</header>