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

Ефим

создал якорную ссылку <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

Adik

Блочные элементы не помещают внутри тега <a>.
ul достаточно, у него display none. в js добавить функцию раскрытия в зависимостит от того что нужно, при клике или при наведении мышкой.

Ефим

Я имел ввиду следующее:

Код: [Выделить]

<ul>
   <li>
      <div>
<p>текст</p>
<a name="answer_7"></a>
      </div>
   </li>
</ul>

{overflow:hidden; height:0}

Это сработало!
НО как теперь сделать, чтобы раскрывался список?

Adik

Код: [Выделить]

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 функция для сворачивания, разворачивания. Используйте эти классы.

Ефим

Цитата: Adik от 27 Июнь 2018, 17:22:39

Код: [Выделить]
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 функция для сворачивания, разворачивания. Используйте эти классы.

ого, как вы посмотрели на мой шкрипт? да такой есть, но что с ним делать? Я даже логику не понимаю((( Список должен раскрываться если что происходит?

Adik

При клике список раскрывается.

Ефим

Цитата: Adik от 27 Июнь 2018, 17:43:12

При клике список раскрывается.

т.е запрос в адресной строке вида url#anchor
это как клик воспринимается, верно?

Adik

Ефим

Onclick не работает. При клике мышкой меню раскрывается, но если в строке браущера ввести #анкор то экран смещается к элементу, но он не раскрывается(((

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

Если можно кодом напишите пли)

PrestaMan

Код зачем писать, он в файле /modules/ets_faq/views/js/faq-front.js

Код: [Выделить]

$(document).on('click',...класс только подставьте

Ефим

Код: [Выделить]

<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 и событие - движение к месту по якорной ссылке это два разных события... Что с этим делать?? Может я что то не понимаю, куда еще можно этот класс запихнуть???

Ефим

Код: [Выделить]

<!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>

Что я делаю не так??? почему не получается???

Adik

Подключить jquery нужно.

Ефим

Цитата: Adik от 28 Июнь 2018, 16:00:38

Подключить jquery нужно.

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

я писал в гугле так "anchor link js onclick"

Ефим

может дело все в onclick ?
Может вот это событие использовать "onhashchange" ?

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

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

Ефим

Якорные ссылки и скрытый <div> display none

Adik

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

Adik

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

Adik

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

Adik

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

PrestaMan

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

Adik

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none

Ефим

Re: Якорные ссылки и скрытый <div> display none