Question

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

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

Answer 1

尝试下面的jquery。

<强> DEMO HERE

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

在booklet.js文件中，更改第no行。 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 );

使用Jquery将Hover更改为Click功能

2 个答案: