将accordion应用于具有data-attribute作为标题的div

Question

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

我想让它像

第一标题

第二标题

第三标题

第4个标题

- ＆GT;点击“第一个标题”，它变为

第一标题

第一内容

第二标题

第三标题

第4个标题

所以我想问一下，有什么方法可以在不更改html结构的情况下将此手风琴应用于此（有了ul，li然后先显示div）？

ul {
  display:none;
  }

div:before {
  content:attr(data-title);
  display:block;
  font-size:14px;
  background:gray;
  text-align:center;
  line-height:14px
  }
  
div {
  background:lightgray;
  }

<ul>
    <li id="first">1st Header</li>
    <li id="second">2nd Header</li>
    <li id="third">3rd Header</li>
    <li id="fourth">4th header</li>
</ul>
<div id="first_div" data-title="1st Header title">First content <br/>1111111111111111111111</div>
<div id="second_div" data-title="2nd Header title">Second content <br/>22222222222222222222</div>
<div id="third_div" data-title="3rd Header title">Third content <br/>33333333333333333333</div>
<div id="fourth_div" data-title="4th Header title">Fourth content <br/>4444444444444444444</div>

Answer 1

您可以使用解决方案

＆＃13;

＆＃13;

$('li').click(function(){
  if($(this).find('div.content').length == 0){
    $(this).append('<div class="content">' + $('#' + $(this).attr('id') + '_div').html() + '</div>');
    $('li').each(function(){
    if($(this).find('div.content').length != 0)
      $(this).find('div.content').slideUp();
    });
    $(this).find('div.content').slideDown();
  } else {
    if($(this).find('div.content').css('display') == 'block'){
      $(this).find('div.content').slideUp();
    } else {
      $(this).find('div.content').slideDown();
    }
  }
  
});

＆＃13;

li {
 list-style: none;
}

div:before {
  content:attr(data-title);
  display:block;
  font-size:14px;
  background:gray;
  text-align:center;
  line-height:14px
  }
  
div {
  background:lightgray;
  }
  
.content{
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。