将具有数据属性的div应用于手风琴作为标题 [英] Applying accordion with div having data-attribute as title

问题描述

我想让它变成像

这样的结构。 b
$ b

第一标题

<2>标题

第三标题

4th Title

- >点击1st Title，它变成

第一个标题

第一个内容

第二个标题

<3>标题

<4>标题

所以我想问一下有没有什么方法可以在不改变html结构的情况下将这个手风琴应用到它上面（先有ul，li先显示div）？

  ul {display：none; } div：before {content：attr（data-title）;显示：块;字体大小：14px的;背景：灰色;文本对齐：中心; line-height：14px} div {background：lightgray; }  

< ul> < li id =first> 1st Header< / li> < li id =second>第二个标头< / li> < li id =third> 3rd Header< / li> < li id =fourth> 4th header< / li>< / ul>< div id =first_divdata-title =1st Header title> First content< br /> 1111111111111111111111< / div>< div id =second_divdata-title =2nd Header title> Second content< div / gt; 22222222222222222222< / div>< div id =third_divdata-title =3rd Header标题>第三个内容< / gt> 33333333333333333333< / div>< div id =fourth_divdata-title =4th Header title>第四个内容> 4444444444444444444< / div> / code>




解决方案

一个解决方案



if（$（this）.find（'div.content'）。length == 0）{$（this）.append（'< div class =content>'+ $（'＃'+ $这个）.attr（'id'）+'_div' ）.html（）+'< / div>'）; $（'li'）。each（function（）{if（$（this）.find（'div.content'）。length！= 0）$ （本）.find（ 'div.content'）效果基本show（）; }）; $（本）.find（ div.content）了slideDown（）; } else {if（$（this）.find（'div.content'）。css（'display'）=='block'）{$（this）.find（'div.content'）。slideUp（）; } else {$（this）.find（'div.content'）。slideDown（）; }}}）;

li {list-style：none ;} div：before {content：attr（data-title）;显示：块;字体大小：14px的;背景：灰色;文本对齐：中心; line-height：14px} div {background：lightgray; } .content {display：none;}

<脚本SRC = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< /脚本>< UL> < li id =first> 1st Header< / li> < li id =second>第二个标头< / li> < li id =third> 3rd Header< / li> < li id =fourth> 4th header< / li>< / ul>< div class =contentid =first_divdata-title =1st Header title>第一个内容< br /> 1111111111111111111111< / div>< div class =contentid =second_divdata-title =2nd Header title>第二个内容< / div>< div class = contentid =third_divdata-title =3rd Header title> Third content< 33333333333333333333< / div>< div class =contentid =fourth_divdata-title = 4th Header title>第四个内容< / gt> 4444444444444444444< / div>

b $ b

希望这能帮助你。

I got a structure like this... to display the title before the div with data-attribute.

I want to make it like

1st Title

2nd Title

3rd Title

4th Title

-> Click "1st Title", it becomes

1st Title

First Content

2nd Title

3rd Title

4th Title

So I want to ask is there any ways that I can apply this accordion on it without changing the html structure (Having ul,li first then show the 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>

解决方案

Here you go with a solution

$('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();
    }
  }
  
});

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;
}

<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>

Hope this will help you.

这篇关于将具有数据属性的div应用于手风琴作为标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！