我试图让 Accordion 在悬停时工作，而不是点击它我尝试了一些代码，但每次所有带有 .panel-collapse 的 div 都立即可见并且无法正常工作。
如果可能，请有人修复我的代码。
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
/**####### COde I tried for onmouseover function #######**/
jQuery(function ($) {
$('#accordion a.accordion-toggle').mouseover(function () {
$(this).removeClass('collapsed').closest('.panel-collapse').addClass('in');
})
$('#accordion a.accordion-toggle').mouseout(function () {
$(this).addClass('collapsed');
})
}) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Food <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul class="arrow cate list-unstyled">
<li><a class="" href="#">1914 translation by H. Rackham</a></li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a></li>
<li><a class="" href="#">Lorem Ipsem Lorem Ipsem Lorem Ipsem Lorem Ipsem</a></li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a></li>
</ul>
</div>
</div>
</div>
<!--loop ends here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
Tourist Spot <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<ul class="arrow cate list-unstyled">
<li><a class="" href="#">1914 translation by H. Rackham</a></li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a></li>
<li><a class="" href="#">Lorem Ipsem Lorem Ipsem Lorem Ipsem Lorem Ipsem</a></li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Weekend Gateway <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="arrow cate list-unstyled">
<li><a class="" href="#">1914 translation by H. Rackham</a></li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a></li>
<li><a class="" href="#">Lorem Ipsem Lorem Ipsem Lorem Ipsem Lorem Ipsem</a></li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>最佳答案
你在找这个吗？您搜索了错误的元素。我建议看一下 jQuery API ;)
$(function() {
$('#accordion .panel').hover(function() {
$(this).find(".accordion-toggle .indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
$(this).find(".panel-collapse").collapse("show");
}, function() {
var $collapse = $(this).find(".panel-collapse");
$(this).find(".accordion-toggle .indicator").addClass("glyphicon-chevron-down").removeClass("glyphicon-chevron-up");
setTimeout(function(){
$collapse.collapse("hide");
},400);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Food <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul class="arrow cate list-unstyled">
<li><a class="" href="#">1914 translation by H. Rackham</a>
</li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a>
</li>
<li><a class="" href="#">Lorem Ipsem Lorem Ipsem Lorem Ipsem Lorem Ipsem</a>
</li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a>
</li>
</ul>
</div>
</div>
</div>
<!--loop ends here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
Tourist Spot <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<ul class="arrow cate list-unstyled">
<li><a class="" href="#">1914 translation by H. Rackham</a>
</li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a>
</li>
<li><a class="" href="#">Lorem Ipsem Lorem Ipsem Lorem Ipsem Lorem Ipsem</a>
</li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Weekend Gateway <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="arrow cate list-unstyled">
<li><a class="" href="#">1914 translation by H. Rackham</a>
</li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a>
</li>
<li><a class="" href="#">Lorem Ipsem Lorem Ipsem Lorem Ipsem Lorem Ipsem</a>
</li>
<li><a class="" href="#">The standard Lorem Ipsum passage, used since the 1500s</a>
</li>
</ul>
</div>
</div>
</div>
</div>关于javascript - jQuery Accordion 悬停而不是单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35378285/