jQuery slideToggleを実行したときに<hr>を非表示にしてから、再度クリックすると表示されます。

Question

jQueryを学び始めています。私はdivを表示/非表示するslideToggleを実行しているシンプルなボタンを持っています。私は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

私は、あなたがクリックするだけで.toggle()関数を呼び出すことができますし、それが非表示になりますあなたはdiv要素が閉じているときにそれを表示し、div要素がオプションの場合に非表示にしたいと思います最初にクリックし、2回目のクリックごとに表示します。

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

例：

// Hide/Show Actions Panel 
 
$("#btnAction").click(function(){ 
 
    $("#actionItems").slideToggle(); 
 
    $('#hrItem').toggle(); //ADDED 
 
    $(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; 
 
}

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

Answer 2

あなたはdisplay : none;とそのためのCSSスタイルを追加するので、そのシンプルhrにID #hrItem持ちながらクラスに#hrItemを追加してに追加しますjsのコードで

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

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>