css
1.accordion dd.bor{
2 border-bottom: solid 1px;
3}
調整
2パターンあると思いますが、どちらも違和感ありませんか?
javascript
1$(function(){
2 $('.accordion dd').hide();
3 $('.accordion dt').on('click',function(){
4 var dd=$(this).next('dd');
5 $.when(dd.slideToggle().siblings('dd').slideUp()).done(function(){
6 dd.addClass('bor').siblings('dd').removeClass('bor');
7 });
8 });
9});
javascript
1$(function(){
2 $('.accordion dd').hide();
3 $('.accordion dt').on('click',function(){
4 $(this).next('dd').addClass('bor').slideToggle().siblings('dd').removeClass('bor').slideUp();
5 });
6});
7
まとめ
javascript
1<style>
2.accordion dd.bor{
3 border-bottom: solid 1px;
4}
5</style>
6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<script>
8$(function(){
9 $('.accordion dd').hide();
10 $('#menu1.accordion dd').addClass('bor').prev('dt').on('click',function(){;
11 $(this).next('dd').slideToggle().siblings('dd').slideUp();
12 });
13 $('#menu2.accordion dt').on('click',function(){
14 $(this).next('dd').addClass('bor').slideToggle().siblings('dd').removeClass('bor').slideUp();
15 });
16 $('#menu3.accordion dt').on('click',function(){
17 var dd=$(this).next('dd');
18 $.when(dd.slideToggle().siblings('dd').slideUp()).done(function(){
19 dd.addClass('bor').siblings('dd').removeClass('bor');
20 });
21 });
22});
23</script>
24<dl id="menu1" class="accordion">
25 <dt>アコーディオン1</dt>
26 <dd>
27 <p>アコーディオン1の内容1</p>
28 <p>アコーディオン1の内容2</p>
29 </dd>
30 <dt>アコーディオン2</dt>
31 <dd>
32 <p>アコーディオン2の内容1</p>
33 <p>アコーディオン2の内容2</p>
34 </dd>
35 <dt>アコーディオン3</dt>
36 <dd>
37 <p>アコーディオン3の内容1</p>
38 <p>アコーディオン3の内容2</p>
39 </dd>
40</dl>
41<dl id="menu2" class="accordion">
42 <dt>アコーディオン4</dt>
43 <dd>
44 <p>アコーディオン4の内容1</p>
45 <p>アコーディオン4の内容2</p>
46 </dd>
47 <dt>アコーディオン5</dt>
48 <dd>
49 <p>アコーディオン5の内容1</p>
50 <p>アコーディオン5の内容2</p>
51 </dd>
52 <dt>アコーディオン6</dt>
53 <dd>
54 <p>アコーディオン6の内容1</p>
55 <p>アコーディオン6の内容2</p>
56 </dd>
57</dl>
58<dl id="menu3" class="accordion">
59 <dt>アコーディオン7</dt>
60 <dd>
61 <p>アコーディオン7の内容1</p>
62 <p>アコーディオン7の内容2</p>
63 </dd>
64 <dt>アコーディオン8</dt>
65 <dd>
66 <p>アコーディオン8の内容1</p>
67 <p>アコーディオン8の内容2</p>
68 </dd>
69 <dt>アコーディオン9</dt>
70 <dd>
71 <p>アコーディオン9の内容1</p>
72 <p>アコーディオン9の内容2</p>
73 </dd>
74</dl>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/16 03:33