bootstrap accordion在mouseover上顯示數據

所以這是一個標準的bootstrap手風琴。我試圖在標題的鼠標懸停時切換到下一節。我可以得到第一個命令來執行隱藏，但第二個顯示會改變一切。我只是想讓它顯示與它下面的標題有關的內容。bootstrap accordion在mouseover上顯示數據

謝謝！

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

來源

2016-04-18 Pete

我真的不理解你，但我希望這將解決你的問題：

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

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

來源

2016-04-18 20:18:37 ltamajs

謝謝你 - 你明白得很好。我試圖移動我之前在jqueryui中使用這個簡單函數引導的內容，但是，當面板不應該移動時，這看起來不像穩定。關於如何使它更穩定的任何想法。謝謝。 jquery code $（function（）{（「＃accordion」）。accordion（{event：「mouseover」 }）; }）; – Pete

bootstrap accordion在mouseover上顯示數據

回答

相關問題