Bootstrap 4 Accordion не автоматически закрывает ранее открытые разделы - PullRequest
Новая
       28

Bootstrap 4 Accordion не автоматически закрывает ранее открытые разделы

0 голосов
/ 31 января 2019

Я пытаюсь научить себя некоторому Bootstrap 4 и основам создания сайта.Я пытался заставить это меню «Аккордеон» функционировать должным образом, и просто не могу заставить его работать правильно.Из того, что я смог найти, наиболее распространенные ошибки являются результатом загрузки jquery после CDN Bootstrap или неправильной ссылки на атрибут data-parent со знаком # .До сих пор я не смог точно определить свою ошибку.

Что я мог сделать, чтобы сделать эту работу правильно?

Вот мой код без моего CSS ниже: 

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset ="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="cabinAccStyle.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	</head>

	<body>
		
		<div class="container">
			<div class="jumbotron">
				<img src="cabinLakePanoramic.jpg" style="width:90%;" class=img-responsive">
			</div>
			<div id="Accordion" role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
					<!--Collapsible section for Lakeside Family Cabins-->
						<div class="panel-heading" role="tab" id="lakesideHeading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#Accordion" href="#lakesideCollapse" aria-expanded="false" aria-controls="lakesideCollapse">
								<span class="fas fa-angle-right"></span>	Lakeside Family Cabin
								</a>
							</h4>
						</div>
						<div id="lakesideCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="lakesideHeading">
							Lakeside Family Cabins are designed to sleep a maximum of  6 people comfortably all on one level.   They are situated along our 7 acre private fishing lake.  You can fish, play and cook out just feet from the water. 	
						
						<br><br>
						<!--Lakeside Cabin Booking Calendar-->
							<iframe id="bookingcalendar" src="
https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&productfilter=36270&embedded=y&search=0&avgrid=y&color=000000&bgcolor=EFFF0A&bcolor=FF050D" style="width: 100%; max-width: 800px; height: 400px; border: 0; padding: 0; margin: 0;" frameborder="0">
<a href="
https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&productfilter=36270&embedded=y&search=0&avgrid=y&color=000000&bgcolor=EFFF0A&bcolor=FF050D">Make Reservation</a></iframe>
						</div>
					</div>
					<!--Collabsible section for 3 Room cabins-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="threeRoomHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#threeRoomCollapse" aria-expanded="false" aria-controls="threeRoomCollapse">
								<span class="fas fa-angle-right"></span>	Lakeside Three Room Cabin
								</a>
							</h4>
						</div>
						<div id="threeRoomCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="threeRoomHeading">
							3 Room Family Cabins have 2 private bedrooms and can sleep up to 6 comfortably. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
						</div>
					</div>
					<!--Collapsible section for Poolside Family Cabins-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="poolsideHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#poolsideCollapse" aria-expanded="false" aria-controls="poolsideCollapse">
								<span class="fas fa-angle-right"></span>	Poolside Family Cabin
								</a>
							</h4>
						</div>
						<div id="poolsideCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="poolsideCollapse">
							Poolside Family Cabins sleep up to 6 guests, feature full spacious kitchens and are next to our indoor pool.
						</div>
					</div>
					<!--Collabsible section for Motel Rooms-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="motelHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#motelCollapse" aria-expanded="false" aria-controls="motelCollapse">
								<span class="fas fa-angle-right"></span>	Motel Room
								</a>
							</h4>
						</div>
						<div id="motelCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="motelHeading">
							Motel Rooms contain 2 queen beds and can accommodate up to 4 guests.  Motel rooms do contain a small refrigerator, microwave and coffee maker. Rooms have access to all amenities, including BBQ facilities, indoor pool and private lake.	
						</div>
					</div>
					<!--Collabsible Section for Suites-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="suiteHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#suiteCollapse" aria-expanded="false" aria-controls="suiteCollapse">
								<span class="fas fa-angle-right"></span>	Suites
								</a>
							</h4>
						</div>
						<div id="suiteCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="suiteHeading">
							Cabin suites have multiple cabin or motel units built together to accommodate larger groups.
						</div>
					</div>
			</div>
		</div>
		
		
	
	
		<script>					
	//When opening panel remove chevron-right, add chevron down
		$('#Accordion .panel-collapse').on('shown.bs.collapse', function () {$(this).prev().find(".fas").removeClass("fa-angle-right").addClass("fa-angle-down");
									});

	//When closing panel remove chevron-down, add chevron right

	$('#Accordion .panel-collapse').on('hidden.bs.collapse', function () {$(this).prev().find(".fas").removeClass("fa-angle-down").addClass("fa-angle-right");
									});
         
		</script>
	</body>









</html>

1 Ответ

0 голосов
/ 31 января 2019

Вы используете аккордеон Bootstrap 3 в приведенном выше примере.Поскольку вы используете Bootstrap 4 JS и CSS, это приведет к возникновению некоторых ошибок.

Вот документация для 4.2.1: https://getbootstrap.com/docs/4.2/components/collapse/#accordion-example

Попробуйте: 

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
...