在Jquery

时间：2015-07-31 04:40:02

标签： jquery html

我创建了一个工作正常的菜单。但是在页面加载时，所有菜单项都会折叠。看看我的代码

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#nav > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});
＆＃13; 
/* nav menu styles */

#nav {
  display: block;
  width: 280px;
  margin-left: -40px;
  list-style-type: none;
}
#nav li {} #nav > li > a {
  display: block;
  padding: 8px 7px;
  font-size: 1.3em;
  font-weight: 200;
  color: #889599;
  text-decoration: none;
  border-bottom: 1px solid #EFEFEF;
  background-color: #F7F9FA;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));
    background: -webkit-linear-gradient(top, #343434, #292929);
    background: -moz-linear-gradient(top, #343434, #292929);
    background: -ms-linear-gradient(top, #343434, #292929);
    background: -o-linear-gradient(top, #343434, #292929);
    background: linear-gradient(top, #343434, #292929);*/
}
#nav > li > a:hover,
#nav > li > a.open {
  color: #889599;
  background-color: #F7F9FA;
}
#nav li ul {
  display: none;
  background: #EFEFEF;
  list-style-type: none;
  margin-left: -40px;
}
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: 200;
  color: #889599;
}
#nav li ul li a:hover {
  background: #F7F9FA;
}
＆＃13; 
<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="nav">
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Animation</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Graphic Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a>
        </li>
        <li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding &amp; Logos</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphic+design+illustrations">Illustrations</a>
        </li>
        <li><a href="http:/www.google.com/search?q=infographics+inspiration">Infographics</a>
        </li>
        <li><a href="http:/www.google.com/search?q=product+design+inspiration">Product Design</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Digital Photography</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=cityscape+photography">Cityscapes</a>
        </li>
        <li><a href="http:/www.google.com/search?q=water+ocean+photography">Oceans</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wide+angle+lens+photography">Wide-Angle Lens</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wildlife+photography">Wildlife</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Print &amp; Identity</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=branding+identity+print+design">Branding</a>
        </li>
        <li><a href="http:/www.google.com/search?q=business+cards+design">Business Cards</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+design+letterpress">Letterpress</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+poster+artwork">Poster Art</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Programming</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=learn+css3+web+development">CSS3</a>
        </li>
        <li><a href="http:/www.google.com/search?q=learn+html5+web+development">HTML5</a>
        </li>
        <li><a href="http:/www.google.com/search?q=javascript+jquery+tutorials">JavaScript &amp; jQuery</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+development+mysql">MySQL Databases</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wordpress+programming">Wordpress CMS</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Web Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=web+design+icons">Icons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+tutorials">Tutorials</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+user+interface">User Interfaces</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design">Website Layouts</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

在页面加载时，所有菜单项都已折叠。我只想在页面加载时展开第一个菜单选项。

请帮我创建。

3 个答案:

答案 0 :(得分：2)

只需这样做： 

$(document).ready(function(){
   $("#nav li:first").find('a').trigger('click');
})

<击>

<强>更新

<强> DEMO 

$(document).ready(function() {
  $("#nav > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
  $("#nav > li:first > a").trigger('click');
  //Or else you can go with below one too
  //$("#nav li:first").find('a').trigger('click');
});

答案 1 :(得分：2)

只需触发点击第一项即可。您可以使用:first Pseudo Class

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#nav > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
  $("#nav > li:first > a").trigger('click');
});
＆＃13; 
/* nav menu styles */

#nav {
  display: block;
  width: 280px;
  margin-left: -40px;
  list-style-type: none;
}
#nav li {} #nav > li > a {
  display: block;
  padding: 8px 7px;
  font-size: 1.3em;
  font-weight: 200;
  color: #889599;
  text-decoration: none;
  border-bottom: 1px solid #EFEFEF;
  background-color: #F7F9FA;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));
    background: -webkit-linear-gradient(top, #343434, #292929);
    background: -moz-linear-gradient(top, #343434, #292929);
    background: -ms-linear-gradient(top, #343434, #292929);
    background: -o-linear-gradient(top, #343434, #292929);
    background: linear-gradient(top, #343434, #292929);*/
}
#nav > li > a:hover,
#nav > li > a.open {
  color: #889599;
  background-color: #F7F9FA;
}
#nav li ul {
  display: none;
  background: #EFEFEF;
  list-style-type: none;
  margin-left: -40px;
}
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: 200;
  color: #889599;
}
#nav li ul li a:hover {
  background: #F7F9FA;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="nav">
    <li><a href="#">Animation</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Graphic Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a>
        </li>
        <li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding &amp; Logos</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphic+design+illustrations">Illustrations</a>
        </li>
        <li><a href="http:/www.google.com/search?q=infographics+inspiration">Infographics</a>
        </li>
        <li><a href="http:/www.google.com/search?q=product+design+inspiration">Product Design</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Digital Photography</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=cityscape+photography">Cityscapes</a>
        </li>
        <li><a href="http:/www.google.com/search?q=water+ocean+photography">Oceans</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wide+angle+lens+photography">Wide-Angle Lens</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wildlife+photography">Wildlife</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Print &amp; Identity</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=branding+identity+print+design">Branding</a>
        </li>
        <li><a href="http:/www.google.com/search?q=business+cards+design">Business Cards</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+design+letterpress">Letterpress</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+poster+artwork">Poster Art</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Programming</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=learn+css3+web+development">CSS3</a>
        </li>
        <li><a href="http:/www.google.com/search?q=learn+html5+web+development">HTML5</a>
        </li>
        <li><a href="http:/www.google.com/search?q=javascript+jquery+tutorials">JavaScript &amp; jQuery</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+development+mysql">MySQL Databases</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wordpress+programming">Wordpress CMS</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Web Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=web+design+icons">Icons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+tutorials">Tutorials</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+user+interface">User Interfaces</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design">Website Layouts</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

一个解决方案是您可以在html中硬编码以打开该菜单

将a和style='display:block'的公开课程添加到ul 

<ul id="nav">
    <li><a class="open" href="#">Animation</a>
      <ul style="display: block;">
        <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
        </li>

或

您可以在点击事件

之前添加此内容 
 $("nav").find("li:first a").addClass("open");
$("nav").find("li:first ul").show();

这里是Example

相关问题
最新问题