jQuery Toggle onClick Функция не работает должным образом

Question

Это простая функция Toggle, когда я нажимаю на .myElement (высота автоматически), она расширяет мой инсайдерский div и на 2-м щелчке мыши обрушивается.

поэтому моя проблема в том, где я нажимаю на .myElement, она рухнула. Я хочу, чтобы она рушилась только тогда, когда я нажимаю на подписанное поле, как на моем файле изображения.

HTML:

<div class="myElement"> 
    <h4>Departments</h4> 
    <div class="fil-content"> 
    <ul> 
     <li><a href="/">Civil Engineering</a></li> 
     <li><a href="/">Computer Engineering</a></li> 
     <li><a href="/">Electrical - Electronics</a></li> 
     <li><a href="/">Energy Systems</a></li> 
     <li><a href="/">Industrial Engineering</a></li> 
    </ul> 
    </div> 
</div> 

CSS:

.myElement { 
    width: 76%; 
    height: auto; 
    background-color: #f5f7f7; 
    border: 1px solid #e4ebee; 
    border-radius: 3px; 
    text-align: left; 
    line-height: 4vw; 
    padding-left: 6%; 
    padding-right: 6%; 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
    cursor:pointer; 
    margin-bottom: 1vw; 
} 
.myElement .fil-content { 
    display: none; 
    max-height:18vw; 
    overflow:auto; 
    width: 93.2%; 
} 

Мой код:

$('.myElement').click(function() { 
    $(this).toggleClass('active'); 
    $(this).children('div').toggle(800); 
}); 

Изображение:

Answer 1

Я бы установить обработчик события клика только на вашем h4 элементе.

var element = $('.myElement') 
element.find("h4").click(function() { 
    element.toggleClass('active'); 
    element.children('div').toggle(800); 
}); 

здесь является рабочей скрипкой: https://jsfiddle.net/jx6sawtt/

Update:

Если у вас есть более чем один элемент, и все они имеют ту же структуру, вы можете использовать этот фрагмент код:

$('.myElement').find("h4").click(function() { 
    var el = $(this).parent(); 
    el.toggleClass('active'); 
    el.children('div').toggle(800); 
}); 

Здесь вы устанавливаете событие click для каждого элемента h4, а затем переключаете родительский элемент o f нажал h4.

Обновленной скрипка: https://jsfiddle.net/4h3pbys6/

Answer 2

$('.myElement').click(function() { 
    $(this).toggleClass('active'); 
    $(this).children('div').toggle(800); 
    $('.fil-content').toggle(); 
});