Question

我创造了一个简单的2步手风琴：http://jsfiddle.net/oampz/36ULG/1/

我遇到了两个问题：

1）我似乎无法得到菜单2＆＃39;标题出现在菜单1＆＃39;

的正下方

2）当我点击＆＃39;菜单2＆＃39;标题，它移动到右上角

HTML：

<ul>
    <li>
        <div class="heading">   <a>Menu 1</a>

        </div>
        <div class="content">
            <ul>
                    <h2>Top Ten Questions</h2>

                <li>    <a href="">How to reach us</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    <a href="">How to email us</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    <a href="">Contact Number</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">   <a>Menu 2</a>

        </div>
        <div class="content hide">
            <ul>
                    <h2>Products</h2>

                <li>    <a href="">Tabels</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    <a href="">Ladders</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>    <a href="">Chairs</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS：

.heading {
    color: white;
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: grey;
    width: 100%;
}
@media (min-width: 700px) {
    .heading {
        float: left;
        width: 35%;
    }
}
.content {
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
}
@media (min-width: 700px) {
    .content {
        float: left;
        margin-left: 35%;
        margin-top: -53px;
        width: 65%;
    }
}
.hide {
    display: none;
}

jQuery的：

$(".heading").click(function () {
    var $this = $(this);
    $this.next(".content").show(400);
    $this.parent().siblings().children().next().hide();
    return false;
});

重要的是要注意，当最小化浏览器触发媒体查询时，标题和内容必须低于彼此。

需要某种明确的修补程序吗？

任何帮助表示感谢。

更新 ** * ** * ** * ** * ** * ** * ** * ** * ****

这是一个更新的小提琴http://jsfiddle.net/oampz/36ULG/4/，其中我添加了更多菜单项（3和4）..希望这应该显示主菜单不会出现在彼此之下。

更新 ** * ** * ** * ** * ** * ** * ** * ** * ****

刚刚对花车进行了一些阅读并清楚了，我已经明确说明：两者;对于.heading的媒体查询..一些微小的改进，一些菜单项堆叠在彼此之下，但菜单之间有一个很大的差距，如果选择菜单3，你可以看到菜单4的差距。更新了小提琴：http://jsfiddle.net/oampz/36ULG/5/

Answer 1

选中 fiddle

当设备宽度大于700像素时，请定位ul position:relative和.content position:absolute，以便内容始终与第一个菜单项对齐。

使用CSS

@media (min-width: 700px) {

    ul{
        position:relative;    
        list-style:none;
        padding-left:0;
    }
    h2{
        margin-top:0;
    }
    .heading {
        float: left;
        width: 35%;
        clear: both;
    }
    .content {
        position:absolute;
        left: 38%;
        width: 65%; 
        top:0;
        padding-top: 10px;
        padding-left: 10px;
    }
}

希望这会对你有所帮助

Answer 2

堆叠问题是由CSS float引起的，因为元素都在浮动内容周围回流，导致标题块彼此相邻。您是正确的，需要clear以确保内容显示在标题下方。

@James是正确的添加答案建议绝对定位是必要的，以使内容始终出现在宽度＆gt;顶部时700像素。

我也在我的代码中使用了这个，但我也切换到display:inline-block而不是float，因为此属性不需要清除，恕我直言会产生更好的代码。

我还从CSS和HTML中删除了.hide类，因为display:none与我的新inline-block发生了冲突，因此我将其替换为 JavaScript hide 除了第一个.content之外的所有人。

最后，<h2>元素不能是<ul>的子元素，因此您需要将它们移到<ul>之上。我也在this demo改变了这一点。

<强>的JavaScript

$('li:not(:first-child) .content').hide();

<强> CSS

ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
.heading {
    color: white;
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: grey;
}
.content {
    padding-top: 10px;
    padding-left: 10px;
    display:inline-block;
}
@media (min-width: 700px) {
    ul {
        position:relative;
    }
    .heading {
        display:inline-block;
        width: 35%;
    }
    .content {
        width: 60%;
        position:absolute;
        top:0;
        left:40%;
    }
}

Answer 3

在第一个li中将class hide分配给div .content，而不是第二个。修改.content和.heading类的浮点数和边距

<ul>
<li>
<div class="heading">   
<a>Menu 1</a>
</div>
<div class="content hide">
<ul>

</ul>
</div>
</li>
<li>
<div class="heading">
<a>Menu 2</a>
</div>
<div class="content">
<ul>

</ul>
</div>
</li>
</ul>


@media (min-width: 700px) {

.heading {
float: none;
width: 35%;
}
}
.content {
padding-top: 10px;
padding-left: 10px;
width: 100%;
}
@media (min-width: 700px) {
.content {
float: none;
margin-left: 0;
margin-top: 0;
width: 65%;
}
}

主菜单项向右移动时出现问题

3 个答案: