JQuery .hover / .on('mouseleave') не работает должным образом

Question

Я пытаюсь использовать функцию наведения, которая является довольно элементарной, но я не могу заставить мышью / mouseleave работать должным образом.

Код:

$(document).ready(function(){

$('.SList').css('display','none');

$(".MList a").on('mouseenter',
  function(){
    var HTMLArr = $(this).children().html().split(':'); 
    $(this).children('p').replaceWith('<p>'+HTMLArr[0]+':&nbsp&#9700;</p>');
    $(this).siblings('.SList').slideDown('slow');
  })
  .on('mouseleave',function(){
    var HTMLArr = $(this).children().html().split(':'); 
    $(this).children('p').replaceWith('<p>'+HTMLArr[0]+':&nbsp&#9698;</p>');
    $(this).siblings('.SList').slideUp('slow');
  });
});

Мышиный центр работает правильно, но он даже не вводит код для отпускания мыши. Любые идеи очень приветствуются.

скрипка

Answer 1

Смотрите это: ДЕМО

$(".MList a").on('mouseenter',
 function(){
  var HTML = $(this).children('p').html(); 
  $(this).children('p').html(HTML.replace('◢','◤'));
  $(this).siblings('.SList').slideDown('slow');
})
.on('mouseleave',function(){
  var HTML = $(this).children('p').html(); 
  $(this).children('p').html(HTML.replace('◤','◢'));
  $(this).siblings('.SList').slideUp('slow');
});

Answer 2

У вас есть проблема с якорем события.

Изменить, чтобы использовать это:

$(".MList a").on('mouseenter', function () {
    var myP = $(this).children('p');
    var HTMLArr = myP.text().split(':');
    myP.html( HTMLArr[0] + ':&nbsp◤');
    $(this).next('.SList').slideDown('slow');
}).on('mouseleave', function () {
    var myP = $(this).children('p');
    var HTMLArr = myP.text().split(':');
    myP.html( HTMLArr[0] + ':&nbsp◢');
    $(this).next('.SList').slideUp('slow');
});

У вас та же проблема с щелчком мыши, и повторить то же самое. ТАК, переделайте и используйте повторно: (вы могли бы даже сделать это лучше, но это показывает начало этого)

$(".MList a").on('mouseenter', function () {
    down($(this).find('p').eq(0));
}).on('mouseleave', function () {
    up($(this).find('p').eq(0));
});
$(".MList a").click(function () {
    if ($(this).siblings('.SList').is(':visible')) {
        up($(this).find('p').eq(0));
    } else {
        down($(this).find('p').eq(0));
    }
});

function up(me) {
    var HTMLArr = me.text().split(':');
    me.html(HTMLArr[0] + ':&nbsp◢');
    me.parent().next('.SList').slideUp('slow');
}

function down(me) {
    var HTMLArr = me.text().split(':');
    me.html(HTMLArr[0] + ':&nbsp◤');
    me.parent().next('.SList').slideDown('slow');
}