javascript - Bootstrap 在 Accordion 点击上隐藏图像

Question

我希望在单击第一个 Accordion 时在“下一个” Accordion 上显示图像。当用户单击每个 Accordion 时，图像将隐藏，下一个将显示。我的剧本没有运气。

  <script>
$(document).ready(function($) {
$('#accordion').click(function(){
    $(this).siblings().find('.Arrow').hide;
    $(this).find('.Arrow').show;
    return false;
});
}); 

<div class="panel-group" id="accordion1">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a class="accordion-toggle " data-toggle="collapse" data-parent="#accordion1" href="#accordion1_1">Title1</a>
            </h5>
          </div>
          <div id="accordion1_1" class="panel-collapse collapse in">
            <div class="panel-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2">Title2 <img src="click.png" height="20px" alt="clickhere" id="Arrow"/></a>
            </h5>
          </div>
          <div id="accordion1_2" class="panel-collapse collapse ">
            <div class="panel-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h5 class="panel-title">
              <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_3">Title3<img src="click.png" height="20px" alt="clickhere" id="Arrow"/></a>
            </h5>
          </div>
          <div id="accordion1_3" class="panel-collapse collapse">
            <div class="panel-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>

Answer 1

有这样的事吗？请注意不要在 html 中重复 ID。

$(document).ready(function($) {
  $('.panel').click(function() {
    $(this).siblings().find('.panel-body').hide();
    $(this).find('.panel-body').show();
    
    $(this).find('.arrow').hide();
    $(this).siblings().find('.arrow').hide();
    $(this).next().find('.arrow').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title">
              <a class="accordion-toggle " data-toggle="collapse" data-parent="#accordion1" href="#accordion1_1" >Title1</a>
            </h5>
    </div>
    <div id="accordion1_1" class="panel-collapse collapse in">
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title">
              <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2">Title2 <img src="click.png" height="20px" alt="clickhere" class="arrow"/></a>
            </h5>
    </div>
    <div id="accordion1_2" class="panel-collapse collapse ">
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title">
              <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_3">Title3<img src="click.png" height="20px" alt="clickhere" class="arrow"/></a>
            </h5>
    </div>
    <div id="accordion1_3" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>