Скрыть/показать информацию при клике и наведении на div

315

11 июня 2017, 19:46

Пытаюсь сделать следующее:

при клике на div с id="cd-login-trigger-in" показывать список и при клике на него же, скрыть этот список, а также скрывать при клике в любой области экрана. Но сейчас при повторном клике на div, список не скрывается, не понимаю почему. Также не пойму, как можно совместно с этим кодом реализовать тоже самое, только плюс и при наведении, и убирании курсора на div - показывать и скрывать список, т.е. допустим, если навели просто курсором без клика на div, показать список, как увели курсор - скрыть div, а, если кликнули на div, то показать список и не скрывать его, когда даже курсор будет уведен с div, только лишь по клику в не области скрыть. Я так понимаю дублировать код для mousemove и mouseout?

$('#cd-login-trigger-in').click(function() { 
    $('#cd-login-trigger-in').toggleClass('visible'); 
    $('.my-profil').fadeIn(); 
}); 
$(document).mouseup(function (e) { 
    var container = $(".my-profil"); 
    if (e.target!=container[0]&&!container.has(e.target).length){ 
        container.fadeOut(); 
        $('#cd-login-trigger-in').removeClass('visible'); 
    } 
});

.my-profil{ 
  display:none; 
} 
#cd-login-trigger-in .js-a{ 
   color:#000; 
} 
#cd-login-trigger-in.visible .js-a{ 
    color:red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="cd-login-trigger-in"> 
    <a href="javascript:void(0)"> 
    <p class="js-a">Профиль</p></a> 
    <ul class="my-profil"> 
        <li class="my-profil-item"> 
            <span>Мой профиль</span>         
        </li> 
                                   
    </ul> 
</div>

Answer 1

Добавляем переменную toggledByClick, которую меняем по клику и которая отвечает за то, чтобы блока не скрывался при отведении курсора.
Скрытие-отображение контейнера лучше вынести в отдельную функцию toggleContainer, если вы в дальнейшем надумаете поменять анимацию на другую, то вам не нужно будет делать кучу замен через ctrl+f.

var container = $(".my-profil"); 
var buttonWrapper = $('#cd-login-trigger-in'); 
var button = buttonWrapper.find('.js-a'); 
var toggledByClick = true; 
var alreadyClicked = false; 
 
button.click(function() { 
  toggledByClick = !toggledByClick; 
  toggleContainer(toggledByClick); 
  alreadyClicked = true; 
}); 
buttonWrapper.hover(function() { 
  toggleContainer(true); 
}, function() { 
  if (!toggledByClick || !alreadyClicked) { 
    toggleContainer(false); 
  } 
}); 
$(document).mouseup(function(e) { 
  if ($(e.target).closest('.js-a').size() === 0 && $(e.target).closest('.my-profil').size() === 0) { 
    toggledByClick = false; 
    toggleContainer(false); 
  } 
}); 
 
function toggleContainer(display) { 
  if (display) { 
    container.fadeIn(); 
  } else { 
    container.fadeOut(); 
  } 
  $('#cd-login-trigger-in').toggleClass('visible', display); 
}

.my-profil { 
  display: none; 
} 
 
#cd-login-trigger-in .js-a { 
  color: #000; 
} 
 
#cd-login-trigger-in.visible .js-a { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="cd-login-trigger-in"> 
  <a href="javascript:void(0)"> 
    <p class="js-a">Профиль</p> 
  </a> 
  <ul class="my-profil"> 
    <li class="my-profil-item"> 
      <span>Мой профиль</span> 
    </li> 
 
  </ul> 
</div>