Question

我的主要问题是我想在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;
    }

Answer 1

我将上面的代码设置到此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);                
 });

然后，将菜单元素的click事件连接到同一个函数。

Answer 2

您还可以使用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");
    });
}

双导航jquery手风琴

2 个答案: