10
我一直在努力定製this bootstrap responsive tabs的例子。我想要的是當用戶懸停在左/右箭頭圖標上時，像滑塊一樣循環選項卡。除此之外，如果用戶不停地將鼠標懸停在左/右箭頭圖標上，我還希望滑塊繼續騎車。我寫了下面的代碼爲：爲什麼mouseleave和mouseout不能在Chrome瀏覽器上使用引導選項卡顯示事件？
(function() {
function changeTab() {
console.log("mouseenterd on ", $(this));
if ($(this).closest("li").hasClass("next") && !$(this).closest("li").hasClass("hovered")) {
$(this).closest(".nav-tabs").children("li").removeClass("hovered");
$(this).tab('show');
} else if ($(this).closest("li").hasClass("prev") && !$(this).closest("li").hasClass("hovered")) {
$(this).closest(".nav-tabs").children("li").removeClass("hovered");
$(this).tab('show');
}
}
function outOfHover() {
console.log("mouseleave on ", $(this));
if ($(this).closest("li").hasClass("hovered")) {
$(this).closest(".nav-tabs").children("li").removeClass("hovered");
}
}
$('[data-toggle="tab"], [data-toggle="pill"]').on('mouseleave', outOfHover); //removes class hovered
$('[data-toggle="tab"], [data-toggle="pill"]').on('mouseenter', changeTab); //runs bootstrap tabs like slider
var triggerClickTab;
var triggerClickCarousel;
function triggerClick(that) {
$(that).tab('show');
console.log("show triggered " + " ", $(that));
}
$('[data-toggle="tab"], [data-toggle="pill"]').on('mouseenter', function() {
var that = this;
triggerClickTab = setInterval(triggerClick, 1650, that);
});
$('[data-toggle="tab"], [data-toggle="pill"]').on('mouseleave', function() {
clearInterval(triggerClickTab);
});
$("#myCarousel .carousel-control").on('mouseenter', function() {
if ($(this).hasClass("left")) {
$("#myCarousel").carousel('prev');
} else if ($(this).hasClass("right")) {
$("#myCarousel").carousel('next');
}
var that = this;
triggerClickCarousel = setInterval(triggerClick, 1650, that);
});
$("#myCarousel .carousel-control").on('click', function() {
clearInterval(triggerClickCarousel);
var that = this;
triggerClickCarousel = setInterval(triggerClick, 1650, that)
});
$("#myCarousel .carousel-control").on('mouseleave', function() {
clearInterval(triggerClickCarousel);
});
/* end if Condition for non-touch device finsihes here */
$(document).on('show.bs.tab', '.nav-tabs [data-toggle="pill"], .nav-tabs [data-toggle="tab"]', function(e) {
var $target = $(e.target);
var $tabs = $target.closest('.nav-tabs');
var $current = $target.closest('li');
var $parent = $current.closest('li.dropdown');
$current = $parent.length > 0 ? $parent : $current;
var $next = $current.next();
var $prev = $current.prev();
var updateDropdownMenu = function($el, position) {
$el
.find('.dropdown-menu')
.removeClass('pull-left pull-center pull-right')
.addClass('pull-' + position);
};
$tabs.find('>li').removeClass('hovered');
if ($current.hasClass("next")) {
$next.addClass('hovered');
} else if ($current.hasClass("prev")) {
$prev.addClass('hovered');
}
$tabs.find('>li').removeClass('next prev');
$prev.addClass('prev');
$next.addClass('next');
updateDropdownMenu($prev, 'left');
updateDropdownMenu($current, 'center');
updateDropdownMenu($next, 'right');
});
}());/**
* Responsive Bootstrap Tabs by @hayatbiralem
* 15 May 2015
*/
@media screen and (max-width: 479px) {
.nav-tabs-responsive > li {
display: none;
width: 23%;
}
.nav-tabs-responsive > li > a {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
width: 100%;
width: 100%;
text-align: center;
vertical-align: top;
}
.nav-tabs-responsive > li.active {
width: 54%;
}
.nav-tabs-responsive > li.active:first-child {
margin-left: 23%;
}
.nav-tabs-responsive > li.active,
.nav-tabs-responsive > li.prev,
.nav-tabs-responsive > li.next {
display: block;
}
.nav-tabs-responsive > li.prev,
.nav-tabs-responsive > li.next {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.nav-tabs-responsive > li.next > a,
.nav-tabs-responsive > li.prev > a {
-webkit-transition: none;
transition: none;
}
.nav-tabs-responsive > li.next > a .text,
.nav-tabs-responsive > li.prev > a .text {
display: none;
}
.nav-tabs-responsive > li.next > a:after,
.nav-tabs-responsive > li.next > a:after,
.nav-tabs-responsive > li.prev > a:after,
.nav-tabs-responsive > li.prev > a:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav-tabs-responsive > li.prev > a:after {
content: "\e079";
}
.nav-tabs-responsive > li.next > a:after {
content: "\e080";
}
.nav-tabs-responsive > li.dropdown > a > .caret {
display: none;
}
.nav-tabs-responsive > li.dropdown > a:after {
content: "\e114";
}
.nav-tabs-responsive > li.dropdown.active > a:after {
display: none;
}
.nav-tabs-responsive > li.dropdown.active > a > .caret {
display: inline-block;
}
.nav-tabs-responsive > li.dropdown .dropdown-menu.pull-xs-left {
left: 0;
right: auto;
}
.nav-tabs-responsive > li.dropdown .dropdown-menu.pull-xs-center {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.nav-tabs-responsive > li.dropdown .dropdown-menu.pull-xs-right {
left: auto;
right: 0;
}
}
/**
* Demo Styles
*/
.wrapper {
padding: 15px 0;
}
.bs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
@media (max-width: 479px) {
#narrow-browser-alert {
display: none;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="container">
<div id="narrow-browser-alert" class="alert alert-info text-center">
<strong>Heads up!</strong>
<br>Narrow your browser!</div>
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs nav-tabs-responsive" role="tablist">
<li role="presentation" class="active">
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">
<span class="text">Home</span>
</a>
</li>
<li role="presentation" class="next">
<a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">
<span class="text">Profile</span>
</a>
</li>
<li role="presentation">
<a href="#samsa" role="tab" id="samsa-tab" data-toggle="tab" aria-controls="samsa">
<span class="text">Metamorfoz by Franz Kafka</span>
</a>
</li>
<li role="presentation">
<a href="#samsa2" role="tab" id="samsa-tab" data-toggle="tab" aria-controls="samsa">
<span class="text">Nup</span>
</a>
</li>
<li role="presentation">
<a href="#samsa3" role="tab" id="samsa-tab" data-toggle="tab" aria-controls="samsa">
<span class="text">haha lol</span>
</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
<p>
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater
eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
<p>
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="samsa" aria-labelledby="samsa-tab">
<p>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
</p>
<p>
He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="samsa2" aria-labelledby="samsa-tab">
<p>
He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="samsa3" aria-labelledby="samsa-tab">
<p>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
</p>
<p>
He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
</p>
</div>
</div>
</div>
</div>
</div>代碼不正確地在計算器becasue的媒體查詢工作。請嘗試這個代碼完全一樣的filddle，並且工作正常：https://jsfiddle.net/hhtm1on3/ Plz縮小輸出的寬度，直到您看到左/右箭頭版本的選項卡。
jsfiddle代碼在Firefox瀏覽器中正常工作，但不在Chrome瀏覽器中正常工作。當特定事件被觸發時，我在控制檯中添加了註釋。正如你可以看到在Firefox瀏覽器mouseleave保持開啓後，每個標籤顯示，但不是鉻。 mouseout事件也會發生同樣的情況。
問：
- 爲什麼不鼠標離開，並在Chrome引導標籤上顯示的事件鼠標移出工作？
- 解決方法是什麼？
下面是相同的小提琴：https：// jsfiddle.net/hhtm1on3/ – user31782
從我所看到的'mouseenterd'和'mouseleave'都記錄在chrome中。 – Dekel
@Dekel嘗試將鼠標懸停在右箭頭圖標上，然後您會看到只有三個選項卡會循環顯示在Chrome上，但在Firefox上，所有選項卡都會循環。然後在控制檯中，您會看到每個新幻燈片後fireox會記錄mouseleave，但chrome卻不會。如果您將鼠標移動1px，則Chrome會立即註冊鼠標。 – user31782