Question

使用jQuery切换打开下拉菜单。由于某种原因，切换功能首先显示菜单然后显示箭头。我创建了一个小提琴，但是下拉列表在那里不起作用，但它可以在我的网站上运行。我该如何解决？

[http://jsfiddle.net/2dtg7xux/]

Answer 1

你的小提琴不工作的原因是因为你没有添加jquery作为框架。要做到这一点，你必须点击单词javascript旁边的齿轮图标，然后选择jquery框架。

我通过从菜单中取出箭头并使其在菜单动画之前制作自己的动画，使动画按预期工作。

这是标记。我添加了一个容器div来保持箭头和子方块，箭头位于顶部：

<li class="folder">
  <a href="#"  onClick="return false;">Folder</a>
  <div class="container">
    <div class="arrow"></div>
    <div class="subnav">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
    </div>
  </div>
</li>

这是CSS。我使箭头具有相对位置，因此它相对于它的容器，然后调整位置以匹配之前的位置，并将z-index更改为1，以使其不在subnav的阴影下。我也把它设为“display：none”所以它开始变得不可见了：

.subnav{
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 23px -2px #707070;
    -moz-box-shadow: 0px 0px 23px -2px #707070;
    box-shadow: 0px 0px 23px -2px #707070;
}
.subnav ul a {
  padding: 6px 20px;
}
.arrow {
    display: none;
    position: relative;
    left: 40px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    z-index: 1;
}

这是Javascript。它现在包括subnav动画之前箭头的动画：

$('.folder a').click(function(){
    $(this).next('.container').find('.arrow').slideToggle();
    $(this).next('.container').find('.subnav').slideToggle();
});

以下是经过调整的小提琴的链接：

http://jsfiddle.net/05pyt1f6/

jQuery用箭头切换下拉列表

1 个答案: