jquery - 在每个 li 之后在 div 上 Accordion

Question

所以我昨天问了一个问题:Applying Accordion with div having data-attribute as title

但我发现这不是使用 data-attr 的理想方法，因为当我想用它进行切换时，我不能将它用作 jQuery 中的选择器。

我有一个这样的结构......在 div 之前显示标题。

li {
  list-style: none;
}

div {
  background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="first">1st Title</li>
  <li id="second">2nd Title</li>
  <li id="third">3rd Title</li>
  <li id="fourth">4th Title</li>
</ul>
<div id="first_div">First content <br/>1111111111111111111111</div>
<div id="second_div">Second content <br/>22222222222222222222</div>
<div id="third_div">Third content <br/>33333333333333333333</div>
<div id="fourth_div">Fourth content <br/>4444444444444444444</div>

我想把它变成这样

1st Title

2nd Title

3rd Title

4th Title

->点击“1st Title”，变成

1st Title

First Content

2nd Title

3rd Title

4th Title

点击其他标题时类似 不改变html结构(ul li在前，div在后)

任何人都可以为我提供一些解决方案，因为我已经为此苦苦挣扎了好几天......想知道如何解决它!谢谢!

Answer 1

这就是你想要的吗？

$("li").on("click", function(e) {
  
  $("li").not(this).removeClass("has-content");
	$("li").not(this).find(".extra").remove();
  
  // console.log("ID", $(this).attr("id"));
  var div_id = "#" + $(this).attr("id") + "_div";
  
  var div_content = $(div_id).html();
  // console.log(div_content);
  if (!$(this).hasClass("has-content")) {
    $(this)
      .addClass("has-content")
      .append("<div class='extra'>" + div_content + "</div>");  
  }
  else {
  	$(this).removeClass("has-content");
		$(this).find(".extra").remove();
  }
  
});

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  padding: 10px 0;
  background: #ff0;
}

div {
  background: lightgray;
  display: none;
}

div.extra {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="first">1st Title</li>
  <li id="second">2nd Title</li>
  <li id="third">3rd Title</li>
  <li id="fourth">4th Title</li>
</ul>
<div id="first_div">First content <br/>1111111111111111111111</div>
<div id="second_div">Second content <br/>22222222222222222222</div>
<div id="third_div">Third content <br/>33333333333333333333</div>
<div id="fourth_div">Fourth content <br/>4444444444444444444</div>