Question

我在互联网上看到了一个带有mootools的手风琴。但这是一个点击事件。我想用鼠标悬停打开手风琴。我已经并列了，但它不起作用。

有人能帮助我吗？提前致谢

window.addEvent('domready', function() 
{
    var myAccordion = new Accordion
    (
        $('accordion'), 'div.toggler', 'div.element', 
        {

        opacity: false,
        display: 0,
        alwaysHide: true,


        // WHEN A PART IS OPEN
        onActive: function(toggler, element)
        {
            toggler.setStyle('color', '#FF4A6F');
        },

        // WHEN A PART IS CLOSED
        onBackground: function(toggler, element)
        {
            toggler.setStyle('color', '#585858');
        }

    // END ACCORDION H3, DIV.ELEMENT
    }
// END VAR NEW ACCORDION
);
// END FUNCTION
});

我的HTML：

 <div id="homeBox_img">
                        <div id="slideshow-container">
                            <img src="img/image1.jpg"  width="345" height="301" alt="introducing img" />
                            <img src="img/image2.jpg"  alt="introducing img" />
                            <img src="img/image3.jpg" width="345" height="301" alt="introducing img" />

                        </div>
                    </div>

Answer 1

要成功构建手风琴，必须有toggler元素的集合（如下例中的h2元素），以及内容元素的集合（'.content'）。我没有看到你添加的html与脚本有什么关系，但是这是一个基本的例子，其中元素的更改是通过'mouseenter'事件触发的。

<强> JS ：

new Fx.Accordion(
    '#accordion h2', '#accordion .content', { trigger: 'mouseenter' }
);

<强> HTML ：

<div id="accordion">
    <h2>image1</h2>
    <div class="content">
        <img src="img/image1.jpg" width="345" height="301" alt="introducing img" />
    </div>
    <h2>image2</h2>
    <div class="content">
        <img src="img/image2.jpg" width="345" height="301" alt="introducing img" />
    </div>
    <h2>image3</h2>
    <div class="content">
        <img src="img/image3.jpg" width="345" height="301" alt="introducing img" />
    </div>

http://mootools.net/docs/more/Fx/Fx.Accordion#Fx-Accordion
http://mootools.net/demos/?demo=Accordion

MooTools手风琴鼠标悬停

1 个答案: