引導手風琴在鼠標懸停時顯示數據

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/