Question

所以这是标准的bootstrap手风琴。

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

我可以获得第一个执行隐藏的命令，但第二个显示会改变所有内容。我只是希望它显示与其下方标题相关的内容。

谢谢！

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

bootstrap手风琴显示鼠标悬停的数据

1 个答案: