jQuery Toggle onClick 函数未按预期工作

Question

这是一个简单的切换功能，当我点击 .myElement(height is auto) 时，它会展开我的内部 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/

更新：

如果你有多个元素并且它们都有相同的结构，你可以使用这个sn-p：

$('.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();
});