使用 Jquery 更改悬停单击功能

Changing the Hover to Click functionality using Jquery

本文关键字：单击 功能 悬停 Jquery 使用      更新时间：2023-09-26

我正在使用Builtby will 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

现在我想更改页面选择器的默认行为。我们正在获得悬停时的页面选项。我想将其更改为单击功能。当我单击页面选择器时，它应该显示菜单。当我再次单击它时，它应该隐藏页面选项。谢谢。

试试下面的jquery。

在这里演示 

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

在您的小册子.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);
    }
});

试试这个：

/

/setter

$(".selector").booklet( "option", "hovers", false );
相关文章：