Сделайте .click override .on ('mouseover')

Im делает временную шкалу, и она отображает информацию при наведении курсора мыши, но я также хочу, чтобы ее можно было щелкнуть, и при нажатии ее остаются видимыми до тех пор, пока не будет нажата другая кнопка, или кнопка снова нажата. Как мне это сделать?Сделайте .click override .on ('mouseover')

JSFIDDLE

Мой HTML:

<div class="timeline-pills"> 
     <div class='timeline-element' id='year-1492'> 
      <p>1492</p> 
     </div> 
     <div class='timeline-element' id='year-1607'> 
      <p>1607</p> 
     </div> 
     <div class='timeline-element' id='year-1620'> 
      <p>1620</p> 
     </div> 
</div> 
<div class="timeline-info-panels"> 
      <div class='timeline-info' id='1492'> 
      <p>1492</p> 
     </div> 
     <div class='timeline-info' id='1607'> 
      <p>1607</p> 
     </div> 
     <div class='timeline-info' id='1620'> 
      <p>1620</p> 
     </div> 
</div>

Мой JQuery:

$('.timeline-element').on('mouseenter', function(){ 
$(this).addClass('hover-over-time-pill') 
$('.timeline-info-panels').show(); 

var hoverID = $(this).attr("id"); 
var newID = hoverID.replace('year-', ''); 
$('#'+newID).show(); 
}); 

$('.timeline-element').on('mouseleave', function(){ 
$(this).removeClass('hover-over-time-pill') 
$('.timeline-info-panels').hide(); 

var hoverID = $(this).attr("id"); 
var newID = hoverID.replace('year-', ''); 
$('#'+newID).hide();  
}); 

$('.timeline-element').click(function(){ 
    $(this).addClass('timeline-click'); 
    $('.timeline-info-panels').show(); 

    var clickID = $(this).id; 
    var newID = clickID.substring(0,5); 
    $('#'+newID).show(); 
}); 
$('.timeline-element').click(function(){ 
    $(this).removeClass('timeline-click'); 
    $('.timeline-info-panels').hide(); 

    var clickID = $(this).id; 
    var newID = clickID.substring(0,5); 
    $('#'+nweID).hide(); 
});

источник

2014-11-19 S. E.

Вы можете установить активные временные рамки в событии кликов.

Сначала добавьте таблетку активного вещества и информацию по щелчку.

$('.timeline-element').click(function() { 

    // Removes old active elements for second click 
    $('.timeline-element.active,.timeline-info.active').removeClass('active'); 

    var hoverID = $(this).attr("id"); 
    var newID = hoverID.replace('year-', ''); 

    // Set active 
    $('#' + newID).addClass('active'); 
    $(this).addClass('active'); 
});

Затем перейдите к css и напишите новый стиль для активного класса.

.timeline-info.active { 
    display:block !important; 
} 
.timeline-element.active{ 
    background-color: #051A5B; 
}

http://jsfiddle.net/s4yvbqzL/3/ есть рабочая демонстрация.

РЕДАКТИР близко активированных элементов

$('.timeline-element').click(function() { 

     var deActive = $(this).hasClass('active'); 

     // Removes old active elements for second click 
     $('.timeline-element.active,.timeline-info.active').removeClass('active'); 

     // If clicked element is not active, activate it. 
     if(deActive == false) { 
      var hoverID = $(this).attr("id"); 
      var newID = hoverID.replace('year-', ''); 

      // Set active 
      $('#' + newID).addClass('active'); 
      $(this).addClass('active'); 
     } 
    });

Работа демо http://jsfiddle.net/s4yvbqzL/4/

источник

2014-11-19 09:55:34

Это работает только частично, я хотел, чтобы это было так, что когда вы снова нажмете на кнопку, информация снова будет скрыта, где будет отображаться информация до тех пор, пока страница не будет refreshed –

Вы можете играть с ним после обнаружения того, что активно. Например, я проверил, что элемент временной привязки включен, прежде чем открыть его. Таким образом, если элемент временной шкалы активируется, просто удаляется активный класс. Я надеюсь, что это поможет, и вы получите эту идею. –

Вы должны использовать метод .off() в JQuery, чтобы отвязать слушателя к MouseEnter и MouseLeave события вы добавили метод .on() и добавили их снова, если вы нажмете кнопку во второй раз.

источник

2014-11-19 09:45:13 lusocoding

и как бы это сделать? Я довольно новичок в html и jQuery, поэтому ... –

Сделайте .click override .on ('mouseover')

ответ

Смежные вопросы