如何在水平div下面显示内容？

Question

好的，所以标题可能听起来很混乱，这就是为什么我创建了一个图像来解释我希望如何工作;这是那个形象;

这是我的代码;

HTML：

    <div class="link">
    <!--nav-1-->        
    <div id="showmenu1" class="font-white">Click Here</div>
        <div class="menu1" id="font-white" style="display: none;">This is all some random text!</div>
    <!--nav-2-->
    <div id="showmenu2" class="font-white">Click Here</div>
        <div class="menu2" id="font-white" style="display: none;">This is all some random text!</div>
    <!--nav-3-->
    <div id="showmenu3" class="font-white">Click Here</div>
        <div class="menu3" id="font-white" style="display: none;">This is all some random text!</div>
</div>

CSS：

.link div{
display: inline;
padding: 2px;
letter-spacing: 6px;
text-align: center;
}

jQuery（show.js）：

    $(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').slideToggle("fast");
    });
});   

jQuery（show1.js）：

    $(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').slideToggle("fast");
    });
});    

jQuery（show2.js）：

    $(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').slideToggle("fast");
    });
}); 

任何帮助总是受到赞赏！谢谢！

Answer 1

您可以使用属性starts with选择器来简化代码：

$("[id^=showmenu]").click(function() {
    $("[class^=menu]").hide();
    $(this).next().slideToggle("fast");
});

然后将此样式添加到要在单击时显示的隐藏div：

.menu1 {
    position: absolute;
    top: 30px;
    left: 10px;
}

<强> Fiddle Demo

Answer 2

将子菜单添加到另一个div元素。这是一个小提琴：http://jsfiddle.net/qHD8R

<div class="link">
    <!--nav-1-->        
    <div id="showmenu1" class="font-white">Click Here</div>

    <!--nav-2-->
    <div id="showmenu2" class="font-white">Click Here</div>

    <!--nav-3-->
    <div id="showmenu3" class="font-white">Click Here</div>
</div>
<div class="sub">

    <div class="menu1" id="font-white" style="display: none;">This is all some random text!</div>

    <div class="menu2" id="font-white" style="display: none;">This is all some random text!</div>

    <div class="menu3" id="font-white" style="display: none;">This is all some random text!</div>

</div>

还有一些css。

.link div, .sub div {
display: inline-block;
padding: 2px;
text-align: center;
width: 150px;
}

.font-white {
    width: 150px;
    cursor: pointer;
    border: 3px solid green;
}

.menu1, .menu2, .menu3 {
    cursor: pointer;
    border: 3px solid green;
}