Где хранить состояние div?

Question

Я ищу лучший способ добиться этого с помощью jQuery: когда я наводю указатель мыши на ссылку, рядом с ней отображается div. Он снова скрыт после того, как я перестану зависать. Если я нажму на ссылку, div будет оставаться до тех пор, пока не будет нажата снова.

Это кажется мне естественным решением, но я новичок в jQuery и буду признателен за совет: подключите link.hover и ссылку. нажмите на logi c, который выполняет вышеизложенное, сохраняя логическое значение «был нажат» в качестве атрибута данных в ссылке.

Это хороший подход или обходной?

Answer 1

Просто используйте CSS и соседний братский комбинатор +
Используйте JavaScript для обработки нажатого состояния с помощью Element.classList.toggle()

document.querySelectorAll('.hov').forEach(el => el.addEventListener('click', evt => {
  evt.preventDefault();
  evt.currentTarget.nextElementSibling.classList.toggle('is-hidden');
}));

             .is-hidden { display: none;  }
.hov:hover + .is-hidden { display: block; }

<a class="hov">HOVER / CLICK</a>
<div class="is-hidden">SOME CONTENT</div>

Если вы хотите различать визуально (улучшенный пользовательский интерфейс), когда этот DIV постоянно отображается - просто используйте другой класс:

document.querySelectorAll('.hov').forEach(el => el.addEventListener('click', evt => {
  evt.preventDefault();
  const El_next = evt.currentTarget.nextElementSibling;
  El_next.classList.toggle('is-hidden');
  El_next.classList.toggle('is-active');
}));

             .is-hidden { display: none;  }
.hov:hover + .is-hidden { display: block; }
.is-active { background: #c0ffee; }

<a class="hov">HOVER / CLICK</a>
<div class="is-hidden">SOME CONTENT</div>

Если элемент для переключения удаленный (не брат или сестра), чем (в любом случае) предпочтительным способом решения желаемого является использование data-* атрибут для хранения селектора:

const handleToggle = evt => {
  const EL_target = document.querySelector(evt.currentTarget.dataset.toggle);
  if (evt.type === 'click') {
    return EL_target.classList.toggle('is-active');
  }
  if (!EL_target.classList.contains('is-active')) {
    EL_target.classList.toggle('is-hidden');
  }
}

document.querySelectorAll('[data-toggle]').forEach(el => [
  'click',
  'mouseenter',
  'mouseleave',
].forEach(evtName => el.addEventListener(evtName, handleToggle)));

.is-hidden { display: none; }
.is-active { background: #c0ffee; }

<div class="something">
  <a class="hov" data-toggle="#el-1">HOVER / CLICK</a>
</div>

<div id="el-1" class="is-hidden">SOME CONTENT</div>

Answer 2

Вот пример того, что, я думаю, вы ищете. Показать / скрыть div при наведении курсора на a и оставить div видимым при нажатии a.

$(document).ready(() => {

    $("#thelink").on('mouseover', () => {
        // Change state if the link hasn't been clicked, otherwise do nothing
        if ($('#thelink').data("clicked") == false) {
            $("#thediv").show();
        }
    });

    $("#thelink").on('mouseout', () => {
        // Change state if the link hasn't been clicked, otherwise do nothing
        if ($('#thelink').data("clicked") == false) {
            $("#thediv").hide();
        }
    });

    $("#thelink").on('click', () => {
        $("#thelink").data("clicked", true);
        $("#thediv").show();
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a id="thelink" href="javascript:void(0)" data-clicked="false">The link</a>

<div hidden id="thediv">I am usually hidden. Mouse over the link to see me. Click on it and I'll stay visible.</div>

Кстати, все это легко сделать и с ванилью js. Мне нравится показывать людям, что jQuery не является необходимым для многих вещей в наши дни, поэтому вот то же самое с ванилью js:

document.addEventListener('DOMContentLoaded', () => {

    document.getElementById('thelink').addEventListener('mouseover', () => {
        const linkClicked = JSON.parse(document.getElementById('thelink').dataset['clicked']);
        if(linkClicked == false) {
            document.getElementById('thediv').hidden = false;
        }
    });

    document.getElementById('thelink').addEventListener('mouseout', () => {
        const linkClicked = JSON.parse(document.getElementById('thelink').dataset['clicked']);
        if(linkClicked == false) {
            document.getElementById('thediv').hidden = true;
        }
    });

    document.getElementById('thelink').addEventListener('click', () => {
        document.getElementById('thelink').dataset['clicked'] = true;
        document.getElementById('thediv').hidden = false;
    });

})

<a id="thelink" href="javascript:void(0)" data-clicked="false">The link</a>

<div hidden id="thediv">I am usually hidden. Mouse over the link to see me. Click on it and I'll stay visible.</div>

Немного более многословно, конечно, но вы не зависите от внешней библиотеки. Если jQuery облегчает вашу жизнь, во что бы то ни стало, используйте ее, но, по крайней мере, подумайте, действительно ли она вам нужна.