0

При наведении указателя мыши объект появляется, при отведении указателя мыши объект удаляется. Применил функцию off чтобы, при нажатии объект не удалялся при отведении мыши. Как сделать чтобы при обратном щелчке вновь объект удалился и работал как прежде? https://jsfiddle.net/zb9q7e8b/2/

  $('h2').next().hide();

  $('h2').mouseover(function() {
    var $anse = $(this).next();
    $anse.show();
  });
  $('h2').mouseout(function() {
    var $anse = $(this).next();
    $anse.hide();
  });
  $('h2').click(function() {
    var $anse = $(this).next();
    $(this).off('mouseout');
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>

2 ответа 2

1

Можно сделать через добавление-удаление класса offed, если класса нет, то добавляем его и применяем off(), а если класс есть, то удаляем его и добавляем событие mouseout():

var titles = $('h2');

titles.next('div').hide();

titles.mouseover(function() {
  $(this).next('div').show();
});

titles.mouseout(function() {
  $(this).next('div').hide();
});

titles.click(function() {
  if (!$(this).hasClass('offed')) {
    $(this).off('mouseout').addClass('offed');
  } else {
    $(this).mouseout(function() {
      $(this).next('div').hide();
    });
    $(this).removeClass('offed');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>

1

Еще один вариант на классах:

$('h2').on('mouseover mouseout click', function(e) {
  var $anse = $(this).next();
  if (e.type == 'click') {
    $anse.toggleClass('clicked');
  } else {
    if (!$anse.hasClass('clicked')) {
      $anse.toggleClass('hovered');
    }
  }
});
div {
  display: none;
}

div.clicked,
div.hovered {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>

Update

В случаи если у пользователя не работает JS можно hover на css сделать.

$('h2').on('click', function(e) {
  $(this).next().toggleClass('clicked');
});
div {
  display: none;
}

h2:hover + div {
  display: block;
} 

div.clicked {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>

4
  • Но есть вероятность что у пользователя не будет работать JS, и тогда у них не будет возможности увидеть блок
    – PeGaS
    15 янв 2017 в 12:03
  • @PeGaS, обновил ответ! 15 янв 2017 в 12:13
  • @PeGaS, не отключает сейчас никто JS, вероятность отключённого JS стремится к нулю, да и 99,5% сайтов без JS не будут работать
    – MasterAlex
    15 янв 2017 в 12:14
  • @Ihor Tkachuk, вариант интересный, но плохо расширяемый, в реальности лучше каждому событию делать отдельную функцию, чтобы при добавлении функционала не пришлось ломать голову, как его увязать с такой логикой
    – MasterAlex
    15 янв 2017 в 12:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.