Question

我想要做的是在点击时将内容显示在另一个div下。我所拥有的是一个菜单，按钮堆叠在彼此的顶部，我希望能够单击一个按钮，让内容直接显示在单击按钮下方并在下一个按钮的顶部。我曾尝试改编我已经使用的另一个菜单THIS，但我似乎无法正确使用，内容出现在整个菜单下方的自己的框中。这是指向fiddle的链接。

<div class="education">
<div class="center-edu">
    <ul class="school-tab">
        <li class="active"><a href="#edu-tab1">Code School</a>
        </li>
        <li><a href="#edu-tab2">Codecademy</a>
        </li>
        <li><a href="#edu-tab3">Grossmont College</a>
        </li>
        <li><a href="#edu-tab4">Steele Canyon</a>
        </li>
    </ul>
</div>
<div class="edu-content">
    <div id="edu-tab1" class="edu-tab">
        <p>content</p>
    </div>
    <div id="edu-tab2" class="edu-tab">
        <p>content</p>
    </div>
    <div id="edu-tab3" class="edu-tab">
        <p>content</p>
    </div>
    <div id="edu-tab4" class="edu-tab">
        <p>content</p>
    </div>
</div>

CSS - 

.education {
    height: 800px;
    width: 100%;
    background-color: rgba(189, 186, 186, 0.3);
    border: 1px solid #7EC9B1;
    clear: both;
    display: inline-block;
}
.school-tab {
    display: inline-block;
}
.school-tab:after {
    display: block;
    clear: both;
    content:'';
}
.center-edu {
    text-align: center;
}
.school-tab li {
    margin: 5px 0;
    list-style: none;
}
.school-tab a {
    text-align: center;
    display: inline-block;
    border-radius: 3px 3px 3px 3px;
    background: rgba(189, 186, 186, 0.1);
    font-size: 48px;
    font-weight: 600;
    color: #7EC9B1;
    transition: all linear 0.15s;
    text-decoration: none;
    font-family: Helvetica, verdana, "trebuchet ms";
    width: 800px;
    height: 100px;
    line-height: 100px;
}
.school-tab a:hover {
    background: #043F44;
    text-decoration: none;
}
li.active a, li.active a:hover {
    background: #7EC9B1;
    color: #ffffff;
}
.edu-content {
    padding: 15px;
    border-radius: 3px;
    box-shadow: -1px 1px 1px #7EC9B1;
    background: rgba(189, 186, 186, 0.3);
    border-top: 3px solid #7EC9B1;
}
.edu-tab {
    display: none;
}
.edu-tab.active {
    display: block;
}
.edu-tab p {
    font-size: 18px;
    font-family: Helvetica, verdana, "trebuchet ms";
    list-style-type: none;
    line-height: 25px;
    text-align: center;
}
Jquery - 
    jQuery(document).ready(function () {
    jQuery('.education .school-tab a').on('click', function (e) {
        var currentAttrValue = jQuery(this).attr('href');
        jQuery('.education ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
        e.preventDefault();
    });
});

Answer 1

我同意Cory的说法，手风琴可能是要走的路

我更新了小提琴http://jsfiddle.net/bdellinger/wzfoowdo/1/

jQuery('.education .school-tab a').on('click', function (e) {
        var position = $(this).position();
           $('.edu-content').css({'position' : 'absolute',
            'left' : position.left,
             'top' : position.top + $(this).height(),
             'width':  $(this).width()                  
                                 });

Answer 2

手风琴是要走的路！一切顺利！谢谢你的答案！

如何创建随下面的内容展开的按钮

2 个答案: