Bootstrap 点击手风琴隐藏图片

Question

我希望在 "next" 单击第一个手风琴时显示图像。当用户单击该图像隐藏的每个手风琴时，下一个显示。我的脚本不走运。

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

Bootstrap 点击手风琴隐藏图片

Bootstrap hide image on accordion click

javascript

jquery

accordion

twitter-bootstrap