質問編集履歴

1

ハッシュを追加したプログラムの修正と出来なかったことを追記

2021/04/09 01:03

投稿

unwind
unwind

スコア19

test CHANGED
File without changes
test CHANGED
@@ -186,7 +186,7 @@
186
186
 
187
187
  sub_list_1-1-1<br>
188
188
 
189
- <a href="test_toggle.html">戻る</a>
189
+ <a href="index.html">戻る</a>
190
190
 
191
191
  </body>
192
192
 
@@ -277,3 +277,245 @@
277
277
  皆様方からご助言を頂ければと存じます。
278
278
 
279
279
  お手数ですが、宜しくお願い致します。
280
+
281
+
282
+
283
+ ### 追記(2021/4/9)
284
+
285
+ hentaiman様のご教授の元、下記プログラムのようにハッシュタグを入れてみました。
286
+
287
+
288
+
289
+ ### ソース(2021/4/9)
290
+
291
+ index.html
292
+
293
+ ```html
294
+
295
+ <!DOCTYPE html>
296
+
297
+ <html lang="ja">
298
+
299
+
300
+
301
+ <head>
302
+
303
+ <meta charset="UTF-8">
304
+
305
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
306
+
307
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
308
+
309
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
310
+
311
+ <title>test</title>
312
+
313
+ </head>
314
+
315
+
316
+
317
+ <body>
318
+
319
+ <ul class="accordionBox">
320
+
321
+ <li>
322
+
323
+ <h3>main menu 1</h3>
324
+
325
+ <ul class="subMenu">
326
+
327
+ <li>
328
+
329
+ <h4>sub menu 1-1</h4>
330
+
331
+ <ul class="subList">
332
+
333
+ <li id="sub_list_1-1-1"><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li>
334
+
335
+ <li id="sub_list_1-1-2"><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li>
336
+
337
+ </ul>
338
+
339
+ </li>
340
+
341
+ <li>
342
+
343
+ <h4>sub menu 1-2</h4>
344
+
345
+ <ul class="subList">
346
+
347
+ <li id="sub_list_1-2-1"><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li>
348
+
349
+ <li id="sub_list_1-2-2"><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li>
350
+
351
+ </ul>
352
+
353
+ </li>
354
+
355
+ </ul><!-- subMenu -->
356
+
357
+ </li>
358
+
359
+ <li>
360
+
361
+ <h3>main menu 2</h3>
362
+
363
+ <ul class="subMenu right">
364
+
365
+ <li>
366
+
367
+ <h4>sub menu 2-1</h4>
368
+
369
+ <ul class="subList">
370
+
371
+ <li id="sub_list_2-1-1"><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a></li>
372
+
373
+ <li id="sub_list_2-1-2"><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li>
374
+
375
+ </ul>
376
+
377
+ </li>
378
+
379
+ <li>
380
+
381
+ <h4>sub menu 2-2</h4>
382
+
383
+ <ul class="subList">
384
+
385
+ <li id="sub_list_2-2-1"><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li>
386
+
387
+ <li id="sub_list_2-2-2"><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li>
388
+
389
+ </ul>
390
+
391
+ </li>
392
+
393
+ </ul><!-- subMenu -->
394
+
395
+ </li>
396
+
397
+ </ul><!-- accordionBox -->
398
+
399
+ </body>
400
+
401
+ </html>
402
+
403
+ ```
404
+
405
+
406
+
407
+ sub_list_1-1-1.html ~ sub_list_2-2-2.html
408
+
409
+ ```html
410
+
411
+ <!DOCTYPE html>
412
+
413
+ <html lang="ja">
414
+
415
+ <head>
416
+
417
+ <meta charset="UTF-8">
418
+
419
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
420
+
421
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
422
+
423
+ <title>sub_list_1-1-1</title>
424
+
425
+ </head>
426
+
427
+ <body>
428
+
429
+ sub_list_1-1-1<br>
430
+
431
+ <a href="index.html#sub_list_1-1-1">戻る</a>
432
+
433
+ </body>
434
+
435
+ </html>
436
+
437
+ ```
438
+
439
+
440
+
441
+ ```javascript
442
+
443
+ $(function() {
444
+
445
+ $("ul.subMenu").hide();
446
+
447
+ $("ul.subList").hide();
448
+
449
+
450
+
451
+ let hash = location.hash;
452
+
453
+ $(hash).next("ul.accordionBox").addClass('open');
454
+
455
+ $(hash).next("ul.subMenu").addClass('open');
456
+
457
+ $(hash).next("ul.subList").addClass('open');
458
+
459
+ $('ul.subList:not(.open)').hide();
460
+
461
+
462
+
463
+ console.log("hash_is:" + hash);
464
+
465
+
466
+
467
+ $("ul.accordionBox h3").click(function() {
468
+
469
+ $(this).next("ul.subMenu").slideToggle('fast');
470
+
471
+ $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp();
472
+
473
+ $("ul.subList").not($(this).next("ul.subList")).slideUp();
474
+
475
+
476
+
477
+ });
478
+
479
+
480
+
481
+ $("ul.subMenu h4").click(function() {
482
+
483
+ $(this).next("ul.subList").slideToggle('fast');
484
+
485
+ $("ul.subList").not($(this).next("ul.subList")).slideUp();
486
+
487
+
488
+
489
+ });
490
+
491
+ });
492
+
493
+ ```
494
+
495
+
496
+
497
+ ### できなかったこと
498
+
499
+ hashを指定しても、javascriptの下記のソースのところが悪いのか、うまく開けませんでした。
500
+
501
+
502
+
503
+ ```javascript
504
+
505
+ let hash = location.hash;
506
+
507
+ $(hash).next("ul.accordionBox").addClass('open');
508
+
509
+ $(hash).next("ul.subMenu").addClass('open');
510
+
511
+ $(hash).next("ul.subList").addClass('open');
512
+
513
+ $('ul.subList:not(.open)').hide();
514
+
515
+ ```
516
+
517
+
518
+
519
+ ハッシュを入れて、アコーディオンメニューを開いた状態にするために、どうすればよいか、
520
+
521
+ 引き続きご教授いただけたらと存じます。