Javascript 引导手风琴在鼠标上方显示数据

Javascript 引导手风琴在鼠标上方显示数据,javascript,jquery,twitter-bootstrap,accordion,Javascript,Jquery,Twitter Bootstrap,Accordion,这是一个标准的手风琴 我试图让鼠标移到标题上方时切换到下一节 我可以让第一个要执行的命令隐藏,但是第二个显示会改变一切。我只想让它显示与标题相关的内容 谢谢 <script type="text/javascript"> $("#accordionuser .panel-heading").mouseover( function() { $('#accordionuser .panel-collapse').collapse('hide');

这是一个标准的手风琴

我试图让鼠标移到标题上方时切换到下一节

我可以让第一个要执行的命令隐藏,但是第二个显示会改变一切。我只想让它显示与标题相关的内容

谢谢

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

$(“#acordionuser.panel heading”).mouseover(
函数(){$('#accordionuser.panel collapse').collapse('hide');
$('#accordiouser.panel collapse').collapse('show');
}
);
Lorem ipsum dolor sit amet,奉献精英,
这是临时性的劳动和就业机会。乌特埃尼姆酒店
最低成本、最低成本、最低成本和最低成本
康多康塞卡特。
Lorem ipsum dolor sit amet,奉献精英,
这是临时性的劳动和就业机会。乌特埃尼姆酒店
最低成本、最低成本、最低成本和最低成本
康多康塞卡特。
Lorem ipsum dolor sit amet,奉献精英,
这是临时性的劳动和就业机会。乌特埃尼姆酒店
最低成本、最低成本、最低成本和最低成本
康多康塞卡特。

我不太了解您,但我希望这能解决您的问题:

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

谢谢-你理解得很好。我试图用这个简单的函数将我以前在jqueryui中拥有的东西移动到引导中,但是,当面板不应该移动时,这似乎并不稳定。任何关于如何使它更稳定的想法。谢谢jquery代码$(function(){$(“#accordion”).accordion({event:“mouseover”});});