jQuery手风琴在悬停而不是点击

时间：2016-02-13 09:37:38

标签： javascript jquery

我正在努力让手风琴在悬停而不是点击它我尝试了一些代码，但每次所有div .panel-collapse同时可见而且无法正常工作。

如果可能，请有人修改我的代码。

 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>

1 个答案:

答案 0 :(得分：2)

你正在寻找这个吗？你搜索了错误的元素。我建议看一下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>

相关问题
最新问题