引导手风琴在鼠标悬停时显示数据

Question

所以这是一个标准的自举手风琴。

我试图在将鼠标悬停在标题上时切换到下一部分。

我可以执行第一个命令来隐藏，但第二个节目改变了一切。 我只是想让它显示与其下方标题相关的内容。

谢谢！

<script type="text/javascript">
 $("#accordionuser .panel-heading").mouseover(
    function() {    $('#accordionuser .panel-collapse').collapse('hide');
                    $('#accordionuser .panel-collapse').collapse('show');
                        }
);
</script>

<div class="panel-group" id="accordionuser">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordionuser" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordionuser" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordionuser" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>



       </div>      
    </div>
</div>

Answer 1

我不太了解你，但我希望这能解决你的问题：

$('#accordionuser .panel-collapse').collapse('hide');
$(this).parents('.panel').find('.panel-collapse').collapse('show');

演示： https : //jsfiddle.net/yavxazv6/