javascript - jQuery 下拉建议

标签 javascript jquery html css

我目前正在尝试使用 jQuery 构建一个快速下拉原型(prototype),并且我可能处于 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" );
    } );
}

我已经在这里设置了我目前所拥有的快速 fiddle ,但是正如你所看到的那样,它并没有按照我的预期工作,我得到动画而不是向下,一些疯狂的重复动画,各种 - 任何帮助会很好!

链接: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;
});

updated jsFiddle File

关于javascript - jQuery 下拉建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24821478/

相关文章:

javascript - 如何选择仅具有特定类别的元素?

php - 有没有办法在页面刷新时保持滚动条位置(没有 Javascript)?

javascript - 如何将变量传递给全局范围

javascript - 照片瀑布效果是jQuery中的Tumblr Mosaic Viewer吗?

javascript - 将插入符号设置为截止日期后的内容可编辑div

javascript - 格式化Chart.js图表

javascript - 堆叠 div 并使用切换显示/隐藏

javascript - 在根目录上表达动态路由

c# - 如何在按下按钮时关闭弹出窗口,并在打开弹出窗口的窗口上发起回发?

javascript - 如何循环jQuery代码?