Скрыть или показать элементы
Всем добрый день. Имеется код типа:
<!--первый элемент--> <div> <a href="#">link-1</a> <p>text</p> </div> <!--второй элемент--> <div> <a href="#">link-2</a> <p>text</p> </div> <!--третий элемент--> <div> <a href="#">link-3</a> <p>text</p> </div> Можно ли реализовать так, чтобы при клике по ссылке отображался параграф этого div`а , а остальные div`ы исчезали? Спасибо за внимание. |
johnon,
форум поиск открывашка в ассортименте 300 вариантов того что вы хотите. |
Тысячекратно извиняюсь , но не нашел то, чего мне нужно. Только стандартые show/hide.
|
Цитата:
|
johnon,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> div p { display: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var div = $('div'); div.on('click', 'a', function(event) { event.preventDefault(); var parent = $(this).parent(); $('p',parent).show(); div.not(parent).remove() }) }); </script> </head> <body> <!--первый элемент--> <div> <a href="#">link-1</a> <p>text</p> </div> <!--второй элемент--> <div> <a href="#">link-2</a> <p>text</p> </div> <!--третий элемент--> <div> <a href="#">link-3</a> <p>text</p> </div> </body> </html> |
рони, может, не так сурово:-?
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> div p { display: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var div = $('div'); div.on('click', 'a', function(event) { event.preventDefault(); var parent = $(this).parent(); $('p',parent).show(); div.not(parent).find('p').hide() }) }); </script> </head> <body> <!--первый элемент--> <div> <a href="#">link-1</a> <p>text</p> </div> <!--второй элемент--> <div> <a href="#">link-2</a> <p>text</p> </div> <!--третий элемент--> <div> <a href="#">link-3</a> <p>text</p> </div> </body> </html> Правда, в результате получается Цитата:
|
Пытаюсь переделать на чистый JS, почему при повторном клике, не закрывается?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <style> div p { display: none; } </style> </head> <body> <div> <a href="#">link-1</a> <p>text</p> </div> <!--второй элемент--> <div> <a href="#">link-2</a> <p>text</p> </div> <!--третий элемент--> <div> <a href="#">link-3</a> <p>text</p> </div> <script> var div2 = document.querySelectorAll('div'); for(var i = 0; i < div2.length; i++){ div2[i].addEventListener('click', function(event) { event.preventDefault(); if(event.target.nextElementSibling.style.display = 'none'){ event.target.nextElementSibling.style.display = 'block' } else if(event.target.nextElementSibling.style.display = 'block'){ div2[i].lastElementChild.style.display = 'none' } }) //div2[i].lastElementChild.style.display = 'none' } </script> </body> </html> |
DivMan,
:blink: странный if :) |
DivMan,
Цитата:
В примерах jquery закрывается p не в кликнутом диве, а во всех остальных. div.not(parent).find('p').hide() |
Мне нужно , чтобы остальные из кликнутой ссылки появлялся параграф ,а остальные дивы исчезали. Ну и ссылку на исходный вариант по возможности.
|
Часовой пояс GMT +3, время: 18:38. |