Question

当用户将鼠标悬停在手风琴的标题上时，我正在努力创建一个折叠/打开的手风琴。到目前为止我的代码在某种程度上起作用。问题是手风琴总是在鼠标进入时打开，但有时在关闭时非常不一致（特别是如果用户非常快地移动鼠标）。

以下链接指向网站http://infotree.co.uk/（手风琴在左侧）以显示问题 - 将鼠标快速移动到左手风琴上。

这是我的代码，仅用于html doc中的一个accordion选项卡：

<div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
          <div class="panel-body">Search to find specific content to learn about.</div>
        </div>
</div>

和它一起使用的java脚本：

$(document).ready(function() {
 $("#headOne1").hover(function() {
    $('#collapseOne1').collapse('show');
 }, function() {
    $('#collapseOne1').collapse('hide');
 }
 );
});

Answer 1

之前已回答过这个问题：Bootstrap Collapse accordion on hover

如果你不想要/需要花哨的动画，你也可以使用纯CSS： https://jsfiddle.net/vvu5ozh1/4/ 使用CSS过渡，你甚至可以做动画，但这会更复杂。

<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>

<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>

.panel:hover .content {
  display:block;
}

.content {
  display: none;
}

Answer 2

通过你提到的前一个手风琴问题（Bootstrap Collapse accordion on hover）我找到了一个人对我遇到的问题的回答，这让我意识到了确切的原因。问题是与动画计时有关，因此如果你在崩溃动画完成之前离开崩溃区域，则jquery永远不会运行折叠功能。解决方案是使用queue和dequeue方法确保所有函数以正确的顺序正确运行。

以下是一个标签的HTML代码：

Route::group(['middleware' => 'auth'], function () {
    Route::auth();

    Route::get('/home', 'HomeController@index');

    Route::get ( '/redirect/{provider}', 'SocialAuthController@redirect' );
    Route::get ( '/callback/{provider}', 'SocialAuthController@callback' );
});

相应标签的java脚本：

<div class="panel panel-default">
      <a href="http://www.google.com" class="sidebarButtons" id="sidebarButton1">Search</a>
      <div id="sidebarContent1" class="panel-collapse collapse">
        <div class="panel-body">Search to find specific content to learn about.</div>
      </div>
    </div>

工作侧边栏示例（http://infotree.co.uk/）

.queue（）将队列命名为AS WELL，因为它将函数添加到队列中.dequeue（）只是运行队列。代码并不完全完美，因为它反对DRY编码（很像我在Bootstrap Collapse accordion on hover中找到的响应） - 这是因为我无法在元素中使用href标记，因为我需要它以便我可以链接到不同的网页，而不是包含隐藏内容的div元素。

有关使代码更短/更有效的任何想法吗？我必须为每个标签重复JS，我觉得可能有更好的方法来实现我的想法。

Bootstrap Collapse Accordion Hover不一致

2 个答案: