There is a switch. Works great when you press the buttons. Asked to add the ability to switch it with the mouse wheel. I broke my head I can not figure out how to do it. help plz. parent block if that div class = "main.content"

createChartTogglersListeners: function() { $('.toggler').click(function() { $('.toggler').removeClass('toggler_active'); var toggler = $(this); toggler.addClass('toggler_active'); }); } this.createChartTogglersListeners(); 
 .togglers-container { position: absolute; display: block; top: 43%; right: 13px; width: 26px; padding: 3px 0; border-radius: 15px; background-color: inherit; } .toggler { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; width: 22px; height: 22px; padding: 7px; margin: auto; cursor: pointer; } .toggler i { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #d0d4d7; } .toggler:not(:first-child) { margin-top: 15px; } .toggler.toggler_active { padding: 0; } .toggler.toggler_active i { background-color: #ed1b24; -webkit-box-shadow: 0px 0 35px 0px rgba(237, 28, 36, .35); -moz-box-shadow: 0px 0 35px 0px rgba(237, 28, 36, .35); -ms-box-shadow: 0px 0 35px 0px rgba(237, 28, 36, .35); -o-box-shadow: 0px 0 35px 0px rgba(237, 28, 36, .35); box-shadow: 0px 0 35px 0px rgba(237, 28, 36, .35); } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.2.6.js"></script> </head> <body> <div class="togglers-container"> <div class="toggler toggler_active" id="pole-chart-toggler"><i></i></div> <div class="toggler" id="line-chart-toggler"><i></i></div> <!--<div class="toggler" id="pie-chart-toggler"><i></i></div>--> <div class="toggler" id="all-chart-toggler"><i></i></div> </div> </body> </html>

    2 answers 2

    Look in the direction of this . It describes quite well how to hang up on an element, you need an event and most importantly, you can make different reactions to the wheel movement up and down, as well as cancel scrolling itself so that the page does not crawl down.

      mb something like that?

       var hover = false; var timeDelay = false; $('#myinput').on('mouseenter',function(){ hover = true; }).on('mouseleave',function(){ hover = false; }) $(window).on('mousewheel',function(event){ if(hover && !timeDelay){ $('#myinput').toggle();//Такого метода по дефолту не существует //необходимо будет написать свой хендлер timeDelay = true; setInterval(function(){timeDelay = false;},200); //сделаем задержку на триггер в 200мс, чтобы при скролле он не сошёл с ума return false; } })