jQuery下拉通知

jQuery dropdown advice

本文关键字：通知 jQuery      更新时间：2023-09-26

我目前正在尝试用jQuery构建一个快速下拉原型，我可能在我的jQuery知识的限制，所以我希望一些帮助来解决我的问题。

我的目标是实现:当用户将鼠标悬停在一个链接上时，一个下拉菜单动画，当用户单击另一个链接时，下一个下拉菜单动画在顶部，等等。

HTML:

    <div class="wrapper">
        <div class="dropdowns">
            <ul>
                <li class="call"><a href="#">Call</a></li>
                <li class="chat"><a href="#">Chat</a></li>
                <li class="message"><a href="#">Send a message</a></li>
            </ul>
        </div>
        <div class="slide call-panel">
            <h1>Call now</h1>
        </div>
        <div class="slide chat-panel">
            <h1>Online chat</h1>
        </div>
        <div class="slide message-panel">
            <h1>Send us a message</h1>
        </div>
    </div>
CSS: 

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.dropdowns {
    overflow: hidden;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline;
}
.call a {
    background: #f1f1f1;
}
.chat a {
    background: #e1e1e1;
}
.message a {
    background: #f1f1f1;
}
a {
    display: block;
    width: 33.333%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
}
.call-panel {
    height: 300px;
    background: darkgrey;
    display: none;
}
.chat-panel {
    height: 300px;
    background: darkgrey;
    display: none;
}
.message-panel {
    height: 300px;
    background: darkgrey;
    display: none;
}
h1 {
    margin: 0;
    padding: 0;
}

JS: 

$( ".call a" ).click(function() {
  toggleSlides( ".call-panel" );
});
$( ".chat a" ).click(function() {
  toggleSlides( ".chat-panel" );
});
$( ".message a" ).click(function() {
  toggleSlides( ".message-panel" );
});
function toggleSlides(slide){
    $(".slide").slideUp ( "slow", function(){
        $(slide).slideDown( "slow" );
    } );
}

我已经在这里设置了一个我目前拥有的快速小提琴，但正如你所看到的，它并没有完全按照我的意图工作，我正在获得动画而不是向下，一些疯狂的重复动画，各种各样的-任何帮助将是伟大的!

链接:http://jsfiddle.net/2zwjZ/

你可以使用jquery this.hash; 

$('.dropdowns li a').removeClass('active');
$('.dropdowns li a').click(function(){
   var tabDiv = this.hash;
    $('.slide').hide();
    $(this).addClass('active');
   $(tabDiv).slideDown();
    return false;
});

已更新的jsFiddle文件

相关文章：