1

我的主要问题是我想在 jquery 中创建一个基于手风琴的网站，当点击手风琴按钮时，它会打开它的内容。

但我不知道我该如何实现，什么时候为它创建一个顶部菜单，它也控制它的滑动。

例如：在主要内容上，我单击工作手风琴按钮 - 它向下滑动并显示工作的附加内容......但我不知道如何链接顶部菜单的“工作”按钮以向下滑动相同内容。

html:

<div id="wrapper">
    <div class="accordionButton"><img src="work.png" width="666" height="84"></div>
    <div class="accordionContent"><img src="7.jpg" width="900"></div>

jQuery：

$(document).ready(function() {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').removeClass('on');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.accordionContent').slideUp('normal');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
     } 

 });


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton').mouseover(function() {
    $(this).addClass('over');

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
    $(this).removeClass('over');                                        
});


$('.accordionContent').hide();

CSS：

#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.accordionButton {  
    width: 900px;
    float: left;
    _float: none;



border-bottom: 1px solid #FFFFFF;
cursor: pointer;
}

.accordionContent { 
    width: 1000px;
    float: left;
    padding:20px;
    _float: none; 
    background: #fff;
    }
4

2 回答 2

0

我将上面的代码设置到这个 jsFiddle - http://jsfiddle.net/SZ9pE/中。你有手风琴工作，我不知道你为什么不将另一个事件连接到你的菜单元素，也可以上下滑动手风琴。

我会为你所有的手风琴设置一个共同的类，这样你就可以一起控制它们。当你点击一个菜单项时，你可以先用这样的东西关闭所有打开的手风琴......

$('.accordionContent').is(":visible").slideUp();

接下来，我会将打开给定手风琴的代码移动到一个通用函数中......

function openContent(btn){
    $('.accordionButton').removeClass('on');
    $('.accordionContent').slideUp('normal');

    $(btn).addClass('on');
    $(btn).next('.accordionContent').slideDown('normal');
}
​

然后，更改按钮单击事件以使用常用功能...

$('.accordionButton').click(function(e) {
    openContent(this);                
 });

然后，将菜单元素的单击事件连接到相同的函数。

于 2012-04-18T13:30:57.483 回答
0

您还可以使用 Jquery 触发器功能。它在您传递给它的选择器上模拟给定事件。

假设您有五个手风琴 div，因此您将有 5 个菜单元素。

只需连接菜单元素即可执行以下操作：

$("#menuitem1").click(function(e){
    $("#accordionLi1").trigger("click");
});

理想情况下，您应该遍历所有可用元素并将触发器附加到它们。就像是：

for(var i=0;i<n;i++)
{
    $("#menuitem"+i).click(function(e){
        $("#accordionLi"+i).trigger("click");
    });
}
于 2012-04-18T14:23:08.353 回答