以下のコードで、「あああ」が表示されている状態で、「いいい」をクリックすると、「あああ」が自動的に非表示になって、「いいい」が表示される仕様にしたいです。どなたかご教授お願い致します。

html
1<a  href="javascript:toggle1();"　>あああ</a>
2<a  href="javascript:toggle2();"　>いいい</a>
3
4<div class="toggle-box1">
5<p>
6あああ
7</p>
8</div>
9
10<div class="toggle-box2">
11<p>
12いいい
13</p>
14</div>

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2<script>
3function toggle1() {
4  $('.toggle-box1').slideToggle('slow');
5}
6</script>
7
8<script>
9function toggle2() {
10  $('.toggle-box2').slideToggle('slow');
11}
12</script>

x_x

2019/12/02 01:51

「あああ」も「いいい」も二つずつありますが、両方ともクリックできて、両方とも変わるのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

書き方がjQueryらしくないですね

javascript
1<script>
2$(function(){
3  $('a[data-target]').on('click',function(){
4    $('.toggle-box').filter('.'+$(this).data('target')).slideToggle('slow');
5    $('.toggle-box').not('.'+$(this).data('target')).slideUp('slow');
6  });
7});
8</script>
9<a  href="#" data-target="a1">あああ</a>
10<a  href="#" data-target="a2">いいい</a>
11
12<div class="toggle-box a1">
13<p>
14あああ
15</p>
16</div>
17<div class="toggle-box a2">
18<p>
19いいい
20</p>
21</div>

最初非表示

javascript
1<script>
2$(function(){
3  $('.toggle-box').hide();
4  $('a[data-target]').on('click',function(e){
5    e.preventDefault();
6    $('.toggle-box').filter('.'+$(this).data('target')).slideToggle('slow');
7    $('.toggle-box').not('.'+$(this).data('target')).slideUp('slow');
8  });
9});
10</script>
11<a  href="#" data-target="a1">あああ</a>
12<a  href="#" data-target="a2">いいい</a>
13
14<div class="toggle-box a1">
15<p>
16あああ
17</p>
18</div>
19<div class="toggle-box a2">
20<p>
21いいい
22</p>
23</div>