Question

我左边有一个导航菜单，我正在使用jquery向左滑动。最初我想显示第一个菜单（即：面板A）。

HTML：

<div class="slide-menu left-side">
<ul class="menu-items">
    <li class="menu-item" data-target="#PanelA" title="Panel A">
        <div class="menu-icon">
            <i class="fa fa-book"></i>
        </div>
        <div class="menu-content">
            <span>Panel A</span>
        </div>
        <div class="menu-close">
            <i class="fa fa-times"></i>
        </div>
    </li>
    <li id="CalendarIcon" class="menu-item" data-target="#PanelB" title="Panel B">
        <div class="menu-icon">
            <i class="fa fa-calendar"></i>
        </div>
        <div class="menu-content">                
            <span>Panel B</span>
        </div>
        <div class="menu-close">
            <i class="fa fa-times"></i>
        </div>
    </li>
    <li id="ShoppingIcon" class="menu-item" data-target="#PanelC" title="Panel C">
        <div class="menu-icon">
            <i class="fa fa-folder-open"></i>
        </div>
        <div class="menu-content">                
            <span>Panel C</span>
        </div>
        <div class="menu-close">
            <i class="fa fa-times"></i>
        </div>
    </li>
    <li id="SearchIcon" class="menu-item" data-target="#PanelD" title="Panel D">
        <div class="menu-icon">
            <i class="fa fa-search"></i>
        </div>
        <div class="menu-content">                
            <span>Panel D</span>
        </div>
        <div class="menu-close">
            <i class="fa fa-times"></i>
        </div>
    </li>
    <li id="BugIcon" class="menu-item" data-target="#PanelE" title="Panel E">
        <div class="menu-icon">
            <i class="fa fa-bug"></i>
        </div>
        <div class="menu-content">                
            <span>Panel E</span>
        </div>
        <div class="menu-close">
            <i class="fa fa-times"></i>
        </div>
    </li>
</ul>
<div class="menu-panels">
    <div id="PanelA" class="menu-panel">
        <h1>Panel A Contents</h1>
    </div>
    <div id="PanelB" class="menu-panel">
        <h1>Panel B Contents</h1>
    </div>
    <div id="PanelC" class="menu-panel">
        <h1>Panel C Contents</h1>
    </div>
    <div id="PanelD" class="menu-panel">
        <h1>Panel D Contents</h1>
    </div>
    <div id="PanelE" class="menu-panel">
        <h1>Panel E Contents</h1>
    </div>
</div>

JS：

$(function() {
    $(".slide-menu").slidemenu();
});

您可以在此处查看完整代码： JSFiddle

有谁知道解决方案？

Answer 1

有几种方式：

1
<!--<li class="menu-item" data-target="#PanelA" title="Panel A">-->
<li class="menu-item" data-target="#PanelA" title="Panel A" style = "display:block">

2
HTML:
<!--<li class="menu-item" data-target="#PanelA" title="Panel A">-->
<li class="menu-item menu-show" data-target="#PanelA" title="Panel A">
CSS:
/*add this to your css file*/
.menu-show{
    display: block;
}

3
//jQuery Way
$('li[title="panel A"]').show();

似乎问题出在你的CSS代码中，而不是你发布的代码......

需要编码帮助：jQuery离开了silde菜单

1 个答案: