Question

我试图让这个面板菜单起作用。我已经工作了几个小时而没有任何成功。我有部分工作。请参阅小提琴here。

我想做的是：

单击目标1，目标2，目标3链接时。持有这些链接的div应该滑出。现在，它只被正在滑动的下一个div覆盖和隐藏。我希望它首先向左滑出，然后让下一个div滑入。
点击其中一个目标链接后。然后点击＆＃34;主菜单＆＃34;链接，制作＆＃34;目标＆＃34;下方的框（绿色，红色，黄色框）从右向左滑出，并有＆＃34;目标菜单＆＃34;最初加载的那个，从左侧滑入。现在，我无法获得＆＃34;主菜单＆＃34;链接做任何事情。单击时应显示初始目标菜单。

我知道那里有很多左右的东西。但我希望尽可能具体。我并不真正关心幻灯片的方向。我更关心的是让它先发挥作用。

<div class="main-menu"><a href="#target0">Main Menu Link</a>
</div> 

<div id="right" id="target0">
This is the Target Menu<br />
<a href="#target1" class="panel">Target 1</a><br/>
<a href="#target2" class="panel">Target 2</a><br/>
<a href="#target3" class="panel">Target 3</a><br/>

<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

Answer 1

＃target0是你的整个元素（它包含target1 target2和target3）

你应该自己解决它：

<div class="main-menu"><a href="#target0" class="panel">Main Menu Link</a>
</div> 
<div id="right" id="main">
    <div id="target0" class="panel active">This is the Target Menu<br />
        <a href="#target1" class="panel">Target 1</a><br/>
        <a href="#target2" class="panel">Target 2</a><br/>
        <a href="#target3" class="panel">Target 3</a><br/>
    </div>
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

编辑：要使灰色块滑动，您应该将Panel类添加到它（我还添加了活动类，以便默认显示）。你只需要设计风格

div.panel.active {
    display:block;
}

Jquery简单幻灯片菜单无效

1 个答案: