有鼠标悬停的手风琴儿童

Question

我一直试图获得一个大型菜单来使用鼠标悬停，而不是单击。手风琴的下拉菜单和第一层工作正常，但是第二层（子级）手风琴工作正常，我遇到了问题。我尝试了不同的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&#241;o Negro</a></li>
                  <li><a href="tours/Cano-Negro-Eco-Safari.php">Ca&#241;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&#241;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&#241;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 &amp; 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 &amp; 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>

Answer 1

我对您的jsfiddle进行了编辑。这是更新的小提琴http://jsfiddle.net/o2hunaef/

您的小提琴问题很少，特别是

$('.panel-collapse').not(target).collapse("hide")
$(target).collapse(option);

将它们更改为

$('.panel-collapse').removeClass("show").addClass("hide")
$(target).addClass(option);

Answer 2

尝试

$(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&#241;o Negro</a></li>
                      <li><a href="tours/Cano-Negro-Eco-Safari.php">Ca&#241;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&#241;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&#241;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 &amp; 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 &amp; 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>