手风琴jQuery-一次打开一个项目，然后关闭其他项目

Question

我已经创建了一个简单的手风琴，当前每个项目都在打开，但是我想一次打开一个项目，如果打开则关闭另一个项目

0.726

0.740

0.804

0.949

$(".title").on("click", function(e) {
	e.preventDefault();
  $(this).toggleClass('title-mob-minus'); // This is for icon
  $(this).next().slideToggle();
  return false;
});

.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}
.link-list__items {
  float: left;
  width: 100%;
  display: none;
}
.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}

Answer 1

更改

$(this).next().slideToggle();

到

$(".link-list__items").not($(this).next()).slideUp();
$(this).next().slideToggle();

$(".title").on("click", function(e) {
  e.preventDefault();
  $(this).toggleClass('title-mob-minus'); // This is for icon
  $(".link-list__items").not($(this).next()).slideUp();
  $(this).next().slideToggle();  
  return false;
});

.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}
.link-list__items {
  float: left;
  width: 100%;
  display: none;
}
.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion One</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion Two</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>

Answer 2

提取您的切换逻辑，然后在单击手风琴时，关闭所有打开的手风琴，然后切换单击的手风琴。

function toggleTitles ($titles) {
  $titles.toggleClass('title-mob-minus'); // This is for icon
  $titles.next().slideToggle();
}

var $allTitles = $(".title").on("click", function(e) {
  e.preventDefault();
  
  // collapse all the other accordions that are open
  toggleTitles($allTitles.not(this).filter('.title-mob-minus'));
  // toggle this accordion
  toggleTitles($(this));
});

.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}

.link-list__items {
  float: left;
  width: 100%;
  display: none;
}

.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
  <div class="title" role="heading">
    <a href="javascript:;">Accordion One</a>
  </div>
  <div class="link-list__items" style="display: none;">
    <ul role="menu">
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
    </ul>
  </div>
</div>
<div class="link-list">
  <div class="title" role="heading">
    <a href="javascript:;">Accordion Two</a>
  </div>
  <div class="link-list__items" style="display: none;">
    <ul role="menu">
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
      <li><a href="#">Accordion Inner Item</a></li>
    </ul>
  </div>
</div>

Answer 3

$(".title").on("click", function(e) {
	e.preventDefault();
  $(this).toggleClass('title-mob-minus'); // This is for icon
  //hide all list-items
  $(".link-list__items").hide();
  //show sibling list items
  $(this).next().slideToggle();
  return false;
});

.link-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.title {
  float: left;
  width: 100%;
}
.link-list__items {
  float: left;
  width: 100%;
  display: none;
}
.link-list__items ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list__items ul li {
  list-style: none;
  display: block;
  padding-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion One</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>
<div class="link-list">
	<div class="title" role="heading">
		<a href="javascript:;">Accordion Two</a>
	</div>
	<div class="link-list__items" style="display: none;">
		<ul role="menu">
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
			<li><a href="#">Accordion Inner Item</a></li>
		</ul>
	</div>
</div>