Автор Тема: Якорные ссылки и скрытый <div> display none  (Прочитано 139 раз)

27 Июнь 2018, 14:37:30
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
создал якорную ссылку <a name="answer_7"></a> внутри <div>.
<div> находится внутри <UL> <LI> (раскрывающийся список).
url#answer_7 работает только если раскрыть список

Проблема в том, что <div> скрыт display: none  CSS

Вопрос "Как использовать якорный ссылки для скрытых div-ов? Как делать так чтобы список сам раскрывался ?"
здесь мой сайт https://intimtouch.ru/faq

здесь реф https://vsexshop.ru/help#Measures
27 Июнь 2018, 14:53:01
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 14856
  • Репутация: +14588/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Блочные элементы не помещают внутри тега <a>.
ul достаточно, у него display none. в js добавить функцию раскрытия в зависимостит от того что нужно, при клике или при наведении мышкой.
27 Июнь 2018, 15:06:03
Ответ #2
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Я имел ввиду следующее:
<ul>
   <li>
      <div>
<p>текст</p>
<a name="answer_7"></a>
      </div>
   </li>
</ul>

{overflow:hidden; height:0}
Это сработало!
НО как теперь сделать, чтобы раскрывался список?
27 Июнь 2018, 17:22:39
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 14856
  • Репутация: +14588/-5
  • Сообщество PrestaShop
    • Просмотр профиля
function(e) {
  e.preventDefault();
  if ($(this).next('.faq_answer').hasClass('open') && $(this).hasClass('open')) {
    $(this).removeClass('open');
    $(this).next('.faq_answer').removeClass('open');
  } else {
    $(this).addClass('open');
    $(this).next('.faq_answer').addClass('open');
  }
}
В вашей теме уже созданы классы и javascript функция для сворачивания, разворачивания. Используйте эти классы.
27 Июнь 2018, 17:35:15
Ответ #4
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
function(e) {
  e.preventDefault();
  if ($(this).next('.faq_answer').hasClass('open') && $(this).hasClass('open')) {
    $(this).removeClass('open');
    $(this).next('.faq_answer').removeClass('open');
  } else {
    $(this).addClass('open');
    $(this).next('.faq_answer').addClass('open');
  }
}
В вашей теме уже созданы классы и javascript функция для сворачивания, разворачивания. Используйте эти классы.


ого, как вы посмотрели на мой шкрипт? да такой есть, но что с ним делать? Я даже логику не понимаю((( Список должен раскрываться если что происходит?
27 Июнь 2018, 17:43:12
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 14856
  • Репутация: +14588/-5
  • Сообщество PrestaShop
    • Просмотр профиля
При клике список раскрывается.
27 Июнь 2018, 17:47:28
Ответ #6
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
При клике список раскрывается.

т.е запрос в адресной строке вида url#anchor
это как клик воспринимается, верно?
27 Июнь 2018, 18:33:33
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 14856
  • Репутация: +14588/-5
  • Сообщество PrestaShop
    • Просмотр профиля
28 Июнь 2018, 00:54:32
Ответ #8
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Onclick не работает. При клике мышкой меню раскрывается, но если в строке браущера ввести #анкор то экран смещается к элементу, но он не раскрывается(((

Может нужно использовать другое событие, такое например onhashchange ?

Если можно кодом напишите пли)
28 Июнь 2018, 13:23:57
Ответ #9
  • Ветеран
  • *****
  • Сообщений: 21364
  • Репутация: +25286/-1
  • Prestashop - просто и эффективно
    • Просмотр профиля
Код зачем писать, он в файле /modules/ets_faq/views/js/faq-front.js
$(document).on('click',...класс только подставьте
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
28 Июнь 2018, 14:08:01
Ответ #10
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
<ul class="ul_question_ul front_question_ul">
<li class="faq_question_li front_question_li"><a class="faq_question_name front_question_name " href="#answer_3">123456</a>
<div id="answer_3" class="faq_answer front_answer ">
<p>9999999999</p>
</div>
</li>
<li class="faq_question_li front_question_li"><a class="faq_question_name front_question_name " href="#answer_4">вопрос2</a>
<div id="answer_4" class="faq_answer front_answer ">
<p>отвеит2</p>
</div>
</li>
<li class="faq_question_li front_question_li"><a class="faq_question_name front_question_name " href="#answer_5">вопрос3</a>
<div id="answer_5" class="faq_answer front_answer ">
<p>апроаво</p>
</div>
</li>
<li class="faq_question_li front_question_li"><a class="faq_question_name front_question_name " href="#answer_6">вопрос4</a>
<div id="answer_6" class="faq_answer front_answer ">
<p>праоногн</p>
</div>
</li>
<li class="faq_question_li front_question_li"><a class="faq_question_name front_question_name " href="#answer_7">вопрос5</a>
<div id="answer_7" class="faq_answer front_answer ">
<p>певгекге</p>
</div>
</li>
</ul>
класс open добавляется при клике, но когда я добавляю в адресную строку #answer_7 происходит только переход к этому месту, а сам список не раскрывается. Ощущение, что событие onclick и событие - движение к месту по якорной ссылке это два разных события... Что с этим делать?? Может я что то не понимаю, куда еще можно этот класс запихнуть???
28 Июнь 2018, 15:59:07
Ответ #11
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
<!DOCTYPE HTML>
<html>
<head>

<style type="text/css">
.faq_answer {
display; none
}

div.open {
display; block
}
</style>

 <script type="text/javascript">
$(document).on('click', '.faq_question_name', function (e) {
    e.preventDefault();
    if ($(this).next('.faq_answer').hasClass('open') && $(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).next('.faq_answer').removeClass('open');
    } else {
        $(this).addClass('open');
        $(this).next('.faq_answer').addClass('open');
    }
});
</script>
</head>
<body>
<ul>
<li>
<a href="#test" onclick="faq_question_name();" >Клик</a>
<div id="test" class="faq_answer"style="display:none">
<p>Ура получилось</p>
</div>

</li>
</ul>
</body>
</html>



Что я делаю не так??? почему не получается???
28 Июнь 2018, 16:00:38
Ответ #12
  • Ветеран
  • *****
  • Сообщений: 14856
  • Репутация: +14588/-5
  • Сообщество PrestaShop
    • Просмотр профиля
28 Июнь 2018, 16:02:30
Ответ #13
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Подключить jquery нужно.

Можно по подробнее, может есть ссылка на урок например или инфу?? или как мне хотя бы сформулировать вопрос для гугла?

я писал в гугле так "anchor link js onclick"
28 Июнь 2018, 16:30:44
Ответ #14
  • Фрилансер
  • *
  • Сообщений: 193
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
может дело все в onclick ?
Может вот это событие использовать "onhashchange" ?

при переходе по
https://intimtouch.ru/faq#answer_3
 список не раскрывается, только к месту подъезжает...
А как сделать чтобы список раскрывался?