Question

我需要构建一个与此类似的顶级菜单： http://delaespada.com

这是我在的地方：

HTML

<div class="wrap">                
    <div id="panel1">
        <h1>PANEL1</h1>
    </div>
    <div id="panel2">
        <h1>PANEL2</h1>
    </div>
    <div id="panel3">
        <h1>PANEL3</h1>
    </div>
    <div id="panel4">
        <h1>PANEL4</h1>
    </div>
    <div id="panel5">
        <h1>PANEL5</h1>
    </div>
 </div><!--end wrap-->

<ul class="nav">
    <li><a class="1" href="#">link1</a></li>
    <li><a class="2" href="#">link2</a></li>
    <li><a class="3" href="#">link3</a></li>
    <li><a class="4" href="#">link4</a></li>
    <li><a class="5" href="#">link5</a></li>
</ul>

JQUERY

$(document).ready(function(){

            $("a.1").click(function(event){
                event.preventDefault();
                $("#panel2").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel1").css({height:150,top:20});
            });

            $("a.2").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel2").css({height:150,top:20});
            });

            $("a.3").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel2").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel3").css({height:150,top:20});
            });

            $("a.4").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel2").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel5").css({height:0,top:-500});
                $("#panel4").css({height:150,top:20});
            });

            $("a.5").click(function(event){
                event.preventDefault();
                $("#panel1").css({height:0,top:-500});
                $("#panel2").css({height:0,top:-500});
                $("#panel3").css({height:0,top:-500});
                $("#panel4").css({height:0,top:-500});
                $("#panel5").css({height:150,top:20});
            });

            $(".wrap").mouseleave(function(){setTimeout(function(){$("#panel1, #panel2, #panel3, #panel4, #panel5").css({height:0,top:-500})},2000);
            });

        });

有没有办法简化jquery代码？

有时候setTimeOut函数工作很奇怪，我做错了什么？当鼠标回到面板中时，我还需要一种方法来停止setTimeOut功能。

请看一下 http://jsfiddle.net/aPzSP/1/

提前致谢

Answer 1

您可以这样简化：

HTML：

为所有面板提供一个共同的课程panel
为菜单链接menuLink
对于菜单链接，提供href作为其目标面板的ID。

来源：

<div class="wrap">
    <div id="panel1" class="panel">
         <h1>PANEL1</h1>

    </div>
    <div id="panel2" class="panel">
         <h1>PANEL2</h1>

    </div>
    <div id="panel3" class="panel">
         <h1>PANEL3</h1>

    </div>
    <div id="panel4" class="panel">
         <h1>PANEL4</h1>

    </div>
    <div id="panel5" class="panel">
         <h1>PANEL5</h1>

    </div>
</div>
<!--end wrap-->
<ul class="nav">
    <li><a class="menuLink" href="#panel1">link1</a>

    </li>
    <li><a class="menuLink" href="#panel2">link2</a>

    </li>
    <li><a class="menuLink" href="#panel3">link3</a>

    </li>
    <li><a class="menuLink" href="#panel4">link4</a>

    </li>
    <li><a class="menuLink" href="#panel5">link5</a>

    </li>
</ul>

JS：

$(document).ready(function () {
    var timeout, $panel = $('.panel');
    //Just bind event handler once
    $(".menuLink").click(function (event) { 
        event.preventDefault();
        //Clear any timeout if clicked withing 2 sec after hovering out of wrap
        clearTimeout(timeout);

        //get the target element reading the href and set its css
        var $target = $(this.getAttribute('href')).css({
            height: 150,
            top: 20
        });
        //Do for all panels but the target.
        $panel.not($target).css({
            height: 0,
            top: -500
        });
    });
    $(".wrap").mouseleave(function () {
        timeout = setTimeout(function () {
            $panel.css({
                height: 0,
                top: -500
            })
        }, 2000);
    });
});

<强> Demo

Answer 2

您可以简化它：

$("a").click(function (event) {
  $(".wrap div").css({height:0,top:-500});
  $("#panel" + $(this).attr("class")).css({height:150,top:20});
});

$(".wrap").mouseleave(function(){
    setTimeout(function(){
        $(".wrap div").css({height:0,top:-500});
    },2000); 
});

Answer 3

检查一下。您可以使用jQuery显示和隐藏面板，而无需手动设置高度和所有内容以及使用CSS动画。

HTML

<div class="wrap">                
    <div id="panel1" class="panel">
        <h1>PANEL1</h1>
    </div>
    <div id="panel2" class="panel">
        <h1>PANEL2</h1>
    </div>
    <div id="panel3" class="panel">
        <h1>PANEL3</h1>
    </div>
    <div id="panel4" class="panel">
        <h1>PANEL4</h1>
    </div>
    <div id="panel5" class="panel">
        <h1>PANEL5</h1>
    </div>
 </div><!--end wrap-->

<ul class="nav">
    <li><a class="1" href="javascript:void(0)" onclick="showPanel('panel1')">link1</a></li>
    <li><a class="2" href="javascript:void(0)" onclick="showPanel('panel2')">link2</a></li>
    <li><a class="3" href="javascript:void(0)" onclick="showPanel('panel3')">link3</a></li>
    <li><a class="4" href="javascript:void(0)" onclick="showPanel('panel4')">link4</a></li>
    <li><a class="5" href="javascript:void(0)" onclick="showPanel('panel5')">link5</a></li>
</ul>

JS - 你需要的只是一个函数

function showPanel(elem){

    if ($(".panel.active").length){ //checks for open panels
        $(".panel.active").removeClass("active").slideUp(function(){
            $("#" + elem).addClass("active").slideDown() //opens panel after other panel is closed
        });
    }else{
        $("#" + elem).addClass("active").slideDown() //opens panel if no other open panels
    }
}

http://jsfiddle.net/g9LUX/1/

Answer 4

试试这个：

$(document).ready(function () {
    $("a").click(function (event) {
        event.preventDefault();
        $("div[id^=panel").css({height: 0,top: -500});
        $("#panel" + this.className).css({height: 150,top: 20});
    });
    var timer;
    var restore = function () {
        timer = setTimeout(function () {
            $("div[id^=panel").css({height: 0,top: -500});
        }, 500);
    }
    $(".wrap").on('mouseleave', restore);
    $(".wrap").on('mouseenter', function () {
        clearTimeout(timer)
    });
});

需要一些帮助才能构建顶级菜单

4 个答案:

Demo