javascript - 需要在执行 jQuery slideToggle 时隐藏一个 ，然后在再次单击时显示

Question

我开始学习 jQuery。我有一个简单的按钮，我执行 slideToggle 来显示/隐藏一个 div。我在被切换的 div 上方有一个

---

断线。我需要在第一次单击按钮以切换 div 打开时隐藏此

---

，然后需要在再次单击按钮以切换 div 关闭时显示

---

。任何帮助将不胜感激。

下面是我的代码以及一个简单的 jsfiddle 示例。

https://jsfiddle.net/ewsrq961/1/

谢谢。

HTML:

<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>

<div id="actionsBtn">
    <a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>

CSS:

#actionItems {
    display: none;
    padding-bottom: 15px;
}

#actionsBtn {
    text-align: center;
    background-color: #252d44;
    width: 120px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff !important;
    padding:5px;
}
#actionsBtn a {
  color: #fff;
}

JS:

// Hide/Show div
        $("#btnAction").click(function(){
            $("#actionItems").slideToggle();
            $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
        });

Answer 1

虽然您有 #hrItem 到 hr 的 ID，但使用 display : none; 为它添加 css 样式很简单，然后添加 #hrItem 类到js代码中的slideToggle

// Hide/Show Actions Panel
$("#btnAction").click(function(){
  $("#actionItems , #hrItem").slideToggle();   //<<<< add hr id
  $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});

#hrItem{   /* style hr*/
  display : none;
}
#actionItems {
    display: none;
    padding-bottom: 15px;
}

#actionsBtn {
    text-align: center;
    background-color: #252d44;
    width: 120px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff !important;
    padding:5px;
}
#actionsBtn a {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr id="hrItem">
<div id="actionItems">
  <h2>Hello There!</h2>
</div>

<div id="actionsBtn">
  <a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions">
    <i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>
    Actions
  </a>
</div>