Question

我在一个网站上工作，当在移动设备上使用时，它与以下页面分开工作。手风琴应该用于在菜单部分处于活动状态时显示菜单项，但在移动设备上，当手风琴处于活动状态时内容不会显示？

html

<H1> A La Carte Menu </H1>
    <div class="wrapper"> 
    <ul class="accordion">
        <li class="nav-dropdown">
            <input type="radio" name="accordion" id="menu 1" />
            <label for="menu 1">
                Starters
            </label>
            <div>
                <h2>Starters</h2>
                <p>Prawn cocktail : Clogherhead prawns coated in Marie Rose sauce served with salad</p>
                <p>Garlic Bread: Garlic bread coated with mozarella cheese</p>
                <p>Bruchetta: Garlic toastie with tomato, basil and melted mozzarella</p>
                <p>Deep Fried Brie: Breaded parcels of Brie deep fried and served with redcurrant jelly</p>
                <p> Garlic Mushrooms: Deep fried breaded mushrooms with garlic mayonnaise</p>
                <P>Fan of Melon: Fan of honeydew melon served with Raspberry Coulis</P>
                <p>Caesar Salad: Crispy cos tossed with bacon, croutons & creamy caesar dressing with parmesan shavings</>
                <p>Soup of the Day
                <p>Chicken Wings: Marinated chicken wings served with sweet chilli dip & side salad</p>
                <p>Egg Mayonnaise</p>
                <P>Tiger Prawns: Served with honey mustard dressing & garlic bread</P>
            </div>
        </li>

和css

div#title {
    text-align:center;
}
body div.wrapper {
    clear:both;
    border: 1px solid #dedede;
    margin: 25px auto;
    overflow: hidden;
    width: 80%;
 }   
ul.accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.accordion li input {
    display: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
}
ul.accordion label {
    background-color: #000000;
    border-bottom: 1px solid #dedede;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color:  #F9C921;
    display: block;
    font-weight: bold;
    line-height: 42px;
    padding: 0 8px;
}
ul.accordion label:hover {
    background-color: #F9C921;
    color:#000000;
    cursor: pointer;    
}
ul.accordion li input ~ div {
    background-color: rgba( 0, 0, 0, .05 );
    max-height: 0;
    opacity: 0;
overflow: hidden;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
ul.accordion li input ~ div p {
    font-size: .9em;
    margin: 16px 24px;  
}
h1 {
    clear:both;
}
ul.accordion li input:checked ~ div {
    max-height: 100%;
    opacity: 1;
    visibility: visible;
}
ul.accordion li input:checked ~ div > ul {
    display: block; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

任何可能的修复或解决方法我无法想到从制作移动设备特定页面开始，除了之前我还没有做过

通过更改代码来解决问题。

Answer 1

总之，不同的浏览器以不同的方式解析代码。而且有些人会更好地自动修复＆＃34; HTML错误。检查您使用移动设备的浏览器是否已更新。然后检查它是否支持该方法。

在你的代码中：您错过了结束</p>，因为它只显示为</>，而其中两个是大写的</P>，因此请将它们更改为小写</p>，并且soup of the day缺少关闭</p>。同时将ID名称从menu 1更改为menu_1。

内容未在移动设备上显示

1 个答案: