Question

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

断开线。首次单击按钮切换div打开时，我需要隐藏此

，然后需要在再次单击按钮时显示

以切换div关闭。任何帮助将不胜感激。

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

谢谢。

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，但使用display : none;为其添加css样式非常简单，然后将#hrItem添加到slideToggle的类中js代码

＆＃13;

// 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')
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我认为你想在div关闭时显示它，并在div选项时隐藏，然后你可以在点击时调用.toggle()功能，它会在第一次点击时隐藏并在每次点击时显示。

$('#hrItem').toggle();

示例：

＆＃13;
＆＃13;
// Hide/Show Actions Panel $("#btnAction").click(function(){ $("#actionItems").slideToggle(); $('#hrItem').toggle(); //ADDED $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up') });
＆＃13;
#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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以在点击事件中添加条件，根据可见性调整<hr/>：

// Hide/Show Actions Panel
$("#btnAction").click(function() {
  $('#hrItem').is(':visible') ? $('#hrItem').hide() : $('#hrItem').show();

  $("#actionItems").slideToggle();

  $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up');
});

#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;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>

执行jQuery slideToggle时需要隐藏<hr />，然后再次单击时显示

3 个答案: