1 | * { |
2 | margin : 0 ; |
3 | padding : 0 ; |
4 | } |
5 |
6 | .box 01 { |
7 | width : 100px ; |
8 | height : 100px ; |
9 | margin : 0 0 30px 0 ; |
10 | background-color : #FA8072 ; |
11 | } |
12 |
13 | .boxlist{ |
14 | background-color : #ccc ; |
15 | padding : 15px 0 ; |
16 | width : 100% ; |
17 | } |
18 |
19 | a { |
20 | color : #285294 ; |
21 | } |
22 |
23 | ul[id^= "sub_" ]{ |
24 | display : none ; |
25 | } |
26 |
27 | a.button{ |
28 | display : inline- block ; |
29 | border : 1px solid #ccc ; |
30 | background-color : #ddd ; |
31 | padding : 20px ; |
32 | } |
1 | < a href = "/aabbbccc/" class = "button" >ボタンだよ</ a > |
2 | < div class = "box01" > |
3 | < a href = "aa" >aa</ a >< br > |
4 | < a href = "bb" >bb</ a >< br > |
5 | < a href = "cc" >cc</ a >< br > |
6 | < a href = "dd" >dd</ a >< br > |
7 | </ div > |
8 |
9 | < hr > |
10 | < div class = "boxlist" > |
11 | < ul > |
12 | </ ul > |
13 | </ div > |
14 | < i ></ i > |
1 | var dispatcher = $( {} ); |
2 |
3 | $( function (){ |
4 | $( 'a.button' ).click( function () { |
5 | var subElem = $( this ).attr( 'href' ); |
6 | console.log(subElem); |
7 | $( '.boxlist ul' ).text(subElem); |
8 |
9 | dispatcher.trigger( 'myFunc' ); |
10 | return false ; |
11 | }) |
12 | }); |
13 |
14 |
15 |
16 | dispatcher.on( 'myFunc' , function (){ |
17 | $( 'i' ).text( 'カスタム成功' ); |
18 | }) |