javascript - Bootstrap Accordion 在鼠标悬停时显示数据

Question

所以这是一个标准的 Bootstrap Accordion 。

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

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

谢谢!

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