jQuery切换onClick函数无法按预期工作

Question

当我点击.myElement（高度为自动）时，这是一个简单的切换功能，它会扩展我的内幕div，第二次点击它就会崩溃。

所以我的问题是，无论我点击.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/

<强>更新

如果您有多个元素并且它们都具有相同的结构，则可以使用此代码段：

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

在此设置每个h4元素的点击事件，然后切换点击的h4的父元素。

更新的小提琴：https://jsfiddle.net/4h3pbys6/

Answer 2

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