Изменение функциональности Hover to Click с помощью JQuery

Question

Я использую встроенный FlipBook.

HTML

<div id="mybook"> 
    <div title="This is a page title"> 
     <h3>Yay, Page 1!</h3> 
    </div> 
    <div> 
     <h3>Yay, Page 2!</h3> 
    </div> 
    <div title="This is another title"> 
     <h3>Yay, Page 3!</h3> 
    </div> 
    <div> 
     <h3>Yay, Page 4!</h3> 
    </div> 
    <div title="Hooray for titles!"> 
     <h3>Yay, Page 5!</h3> 
    </div> 
    <div> 
     <h3>Yay, Page 6!</h3> 
    </div> 
</div> 

Jquery

$(function() { 
    $('#mybook').booklet({ 
     menu: '#custom-menu', 
     pageSelector: true 
    }); 
}); 

Демо здесь: http://builtbywill.com/code/booklet/demos/pageselect

Теперь я хочу, чтобы изменить поведение по умолчанию Page Selector. Мы получаем параметры страницы при наведении. Я хочу изменить его на функциональность Click. Когда я нажимаю на Селектор страниц, он должен отображать меню. Когда я снова нажимаю его, он должен скрывать страницу selecor..Thanks.

Answer 1

Попробуйте ниже JQuery.

DEMO HERE

$('#mybook').booklet({ 
    menu: '#custom-menu', 
    pageSelector: true, 
    manual: false, 
    hovers: false, 
    overlays: true 
}); 

В файле booklet.js измените строку нет. 577 // добавление эффектов зависания ниже

// add click effects 
pageSelector.on('click.booklet', function() { 
    if (pageSelectorList.stop().height() == pageSelectorHeight) 
    { 
     pageSelectorList.stop().animate({height: 0, paddingBottom: 0}, 500); 
    } 
    else 
    { 
     pageSelectorList.stop().animate({height: pageSelectorHeight, paddingBottom: 10}, 500); 
    } 
}); 

Answer 2

Попробуйте это:

// сеттер

$(".selector").booklet("option", "hovers", false);