有鼠標懸停的手風琴兒童
[英]accordion child with mouseover
問題描述
我一直在嘗試使用大型菜單來使用鼠標懸停而不是單擊。 手風琴的下拉菜單和第一層工作正常，但是第二層（子級）手風琴工作正常，我遇到了問題。 我嘗試了不同的Java和CSS解決方案，它們似乎只影響手風琴的第一層。 手風琴的第二層移動很快，可以打開並查看或單擊任何東西。 任何想法或建議都很好。
這是我的代碼的小提琴鏈接http://jsfiddle.net/kLx6e52e/407/
<div id="accordion2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-1">Boat Tours</a></h4>
</div>
<div id="collapse2-1" class="panel-collapse collapse">
<div class="panel-body">
<div id="accordion5" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion5" href="#collapse2-2-1">Arenal Boat Tours & Safari Floats</a></h4>
</div>
<div id="collapse2-2-1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="Boat_Tours.php#BOAT">** All Boat Tours</a></li>
<li><a href="tours/Pontoon-Cano-Negro.php">Pontoon Caño Negro</a></li>
<li><a href="tours/Cano-Negro-Eco-Safari.php">Caño Negro Eco Safari</a></li>
<li><a href="tours/Raft-Safari-Float-Don-Pedro-Farm.php">Raft Safari Float + Don Pedro Farm</a></li>
<li><a href="tours/Sunset-Catamaran-Cruise-on-Lake-Arenal.php">Sunset Catamaran Cruise on Lake Arenal</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion5" href="#collapse2-2-2">Arenal Kayaking & Canoe Tours</a></h4>
</div>
<div id="collapse2-2-2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="Boat_Tours.php#KAYAK">** All Boat Tours</a></li>
<li><a href="tours/Canoe-Lake-Arenal.php">Canoe Lake Arenal</a></li>
<li><a href="tours/Canoe-Cano-Negro.php">Canoe Caño Negro</a></li>
<li><a href="tours/River-Kayak-Safari-Float-Tour.php">River Kayak Safari Float Tour</a></li>
<li><a href="tours/Canoe-Safari-Float.php">Canoe Safari Float</a></li>
<li><a href="tours/Canoe-Tres-Amigos-River.php">Canoe Tres Amigos River</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-2">Sport Fishing</a></h4>
</div>
<div id="collapse2-2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="tours/Lake-Arenal-Bass-Fishing.php">Lake Arenal Bass Fishing</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-3">Watersports Tours</a></h4>
</div>
<div id="collapse2-3" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="Watersports_Tours.php">** All Watersports Tours</a></li>
<li><a href="tours/Lake-Arenal-Extreme-Flyboard.php">Lake Arenal Extreme Flyboard</a></li>
<li><a href="tours/Canoe-Cano-Negro.php">Canoe Caño Negro</a></li>
<li><a href="tours/Kayaking-Arenal-Lake.php">Kayaking Lake Arenal</a></li>
<li><a href="tours/Canoe-Lake-Arenal.php">Canoe Lake Arenal</a></li>
<li><a href="tours/River-Kayak-Safari-Float-Tour.php">River Kayak Safari Float Tour</a></li>
<li><a href="tours/Canoe-Safari-Float.php">Canoe Safari Float</a></li>
<li><a href="tours/Biking-and-Kayaking-Lake-Arenal.php">Biking & Kayaking Lake Arenal</a></li>
<li><a href="tours/Canoe-Tres-Amigos-River.php">Canoe Tres Amigos River</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-4">Whitewater Rafting Tours</a></h4>
</div>
<div id="collapse2-4" class="panel-collapse collapse">
<div class="panel-body">
<div id="accordion4" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion4" href="#collapse2-1-1">Arenal Rafting Half Day Tours & Full Day Combos</a></h4>
</div>
<div id="collapse2-1-1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="Whitewater_Rafting_Tours.php">** All Whitewater Rafting Tours</a></li>
<li><a href="../transportation/Smart-Connections-Deals-Pacuare-River-III-IV.php">White Water Rafting Pacuare River Class III/IV</a></li>
<li><a href="../transportation/Smart-Connections-Deals-Toro-River-III-IV.php">Toro River Class III & IV</a></li>
<li><a href="../transportation/Smart-Connections-Deals-Balsa-River-II-III.php">River Rafting Balsa River Class II & III</a></li>
<li><a href="tours/Rappel-Rafting-Combo.php">Rappel & Rafting Combo</a></li>
<li><a href="tours/Costa-Rica-Chocolate-Tour-and-Balsa-River-Rafting.php">Costa Rica Chocolate Tour and Balsa River Rafting</a></li>
<li><a href="tours/Canopy-and-Rafting-Balsa-River-Class-II-III-Combo-Tour.php">Canopy & Rafting Balsa River Class II/III Combo Tour</a></li>
<li><a href="tours/La-Fortuna-ATV-Rafting-Combo.php">ATV + Rafting Combo</a></li>
<li><a href="tours/Club-Rio-Adventure-Package.php">Club Rio Adventure Package</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion4" href="#collapse2-1-2">Arenal Rafting Multi-Day Adventures</a></h4>
</div>
<div id="collapse2-1-2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="Whitewater_Rafting_Tours.php">** All Whitewater Rafting Tours</a></li>
<li><a href="tours/Rafting-Pacuare-Class-III-IV-Overnight-Rainforest-Excursion.php">Rafting Pacuare Class III/IV Overnight Rainforest Excursion</a></li>
<li><a href="tours/Pacuare-River-Rafting-Hike-Indigenous-Visit-3-Day.php">Pacuare River Rafting, Hike & Indigenous Visit 3 Day Tour</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
2 個解決方案
解決方案1
0 2018-08-31 03:41:35
我對您的jsfiddle進行了編輯。 這是更新的小提琴http://jsfiddle.net/o2hunaef/
小提琴的問題很少，特別是
$('.panel-collapse').not(target).collapse("hide")
$(target).collapse(option);
更改為
$('.panel-collapse').removeClass("show").addClass("hide")
$(target).addClass(option);
解決方案2
0 2018-08-31 03:59:06
嘗試這個
$(function() {
$(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) {
var $this = $(this),
href,
target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href'))
&& href.replace(/.*(?=#[^\s]+$)/, ''), //strip for ie7
option = $(target).hasClass('in') ? 'hide' : "show"
$('.panel-collapse', '.sub-panel-collapse').not(target).collapse("hide")
$(target).collapse(option);
})
}）;
和這個
<div id="accordion2" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-1">Boat Tours</a></h4> </div> <div id="collapse2-1" class="panel-collapse collapse"> <div class="panel-body"> <div id="accordion5" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion5" href="#collapse2-2-1">Arenal Boat Tours & Safari Floats</a></h4> </div> <div id="collapse2-2-1" class="sub-panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="Boat_Tours.php#BOAT">** All Boat Tours</a></li> <li><a href="tours/Pontoon-Cano-Negro.php">Pontoon Caño Negro</a></li> <li><a href="tours/Cano-Negro-Eco-Safari.php">Caño Negro Eco Safari</a></li> <li><a href="tours/Raft-Safari-Float-Don-Pedro-Farm.php">Raft Safari Float + Don Pedro Farm</a></li> <li><a href="tours/Sunset-Catamaran-Cruise-on-Lake-Arenal.php">Sunset Catamaran Cruise on Lake Arenal</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion5" href="#collapse2-2-2">Arenal Kayaking & Canoe Tours</a></h4> </div> <div id="collapse2-2-2" class="panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="Boat_Tours.php#KAYAK">** All Boat Tours</a></li> <li><a href="tours/Canoe-Lake-Arenal.php">Canoe Lake Arenal</a></li> <li><a href="tours/Canoe-Cano-Negro.php">Canoe Caño Negro</a></li> <li><a href="tours/River-Kayak-Safari-Float-Tour.php">River Kayak Safari Float Tour</a></li> <li><a href="tours/Canoe-Safari-Float.php">Canoe Safari Float</a></li> <li><a href="tours/Canoe-Tres-Amigos-River.php">Canoe Tres Amigos River</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-2">Sport Fishing</a></h4> </div> <div id="collapse2-2" class="panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="tours/Lake-Arenal-Bass-Fishing.php">Lake Arenal Bass Fishing</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-3">Watersports Tours</a></h4> </div> <div id="collapse2-3" class="sub-panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="Watersports_Tours.php">** All Watersports Tours</a></li> <li><a href="tours/Lake-Arenal-Extreme-Flyboard.php">Lake Arenal Extreme Flyboard</a></li> <li><a href="tours/Canoe-Cano-Negro.php">Canoe Caño Negro</a></li> <li><a href="tours/Kayaking-Arenal-Lake.php">Kayaking Lake Arenal</a></li> <li><a href="tours/Canoe-Lake-Arenal.php">Canoe Lake Arenal</a></li> <li><a href="tours/River-Kayak-Safari-Float-Tour.php">River Kayak Safari Float Tour</a></li> <li><a href="tours/Canoe-Safari-Float.php">Canoe Safari Float</a></li> <li><a href="tours/Biking-and-Kayaking-Lake-Arenal.php">Biking & Kayaking Lake Arenal</a></li> <li><a href="tours/Canoe-Tres-Amigos-River.php">Canoe Tres Amigos River</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapse2-4">Whitewater Rafting Tours</a></h4> </div> <div id="collapse2-4" class="panel-collapse collapse"> <div class="panel-body"> <div id="accordion4" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion4" href="#collapse2-1-1">Arenal Rafting Half Day Tours & Full Day Combos</a></h4> </div> <div id="collapse2-1-1" class="sub-panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="Whitewater_Rafting_Tours.php">** All Whitewater Rafting Tours</a></li> <li><a href="../transportation/Smart-Connections-Deals-Pacuare-River-III-IV.php">White Water Rafting Pacuare River Class III/IV</a></li> <li><a href="../transportation/Smart-Connections-Deals-Toro-River-III-IV.php">Toro River Class III & IV</a></li> <li><a href="../transportation/Smart-Connections-Deals-Balsa-River-II-III.php">River Rafting Balsa River Class II & III</a></li> <li><a href="tours/Rappel-Rafting-Combo.php">Rappel & Rafting Combo</a></li> <li><a href="tours/Costa-Rica-Chocolate-Tour-and-Balsa-River-Rafting.php">Costa Rica Chocolate Tour and Balsa River Rafting</a></li> <li><a href="tours/Canopy-and-Rafting-Balsa-River-Class-II-III-Combo-Tour.php">Canopy & Rafting Balsa River Class II/III Combo Tour</a></li> <li><a href="tours/La-Fortuna-ATV-Rafting-Combo.php">ATV + Rafting Combo</a></li> <li><a href="tours/Club-Rio-Adventure-Package.php">Club Rio Adventure Package</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion4" href="#collapse2-1-2">Arenal Rafting Multi-Day Adventures</a></h4> </div> <div id="collapse2-1-2" class="panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="Whitewater_Rafting_Tours.php">** All Whitewater Rafting Tours</a></li> <li><a href="tours/Rafting-Pacuare-Class-III-IV-Overnight-Rainforest-Excursion.php">Rafting Pacuare Class III/IV Overnight Rainforest Excursion</a></li> <li><a href="tours/Pacuare-River-Rafting-Hike-Indigenous-Visit-3-Day.php">Pacuare River Rafting, Hike & Indigenous Visit 3 Day Tour</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div>
jQuery手風琴鼠標懸停和垂直菜單導航上的mouseout
[英]jquery accordion mouseover and mouseout on navigation of vertical menu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.