Question

我正在为一所学校创建一个网站（公益工作），并且正在尝试使用手风琴子菜单。我有代码，以便页面加载所有关闭而不是打开。有没有办法创建一个新的div，我可以发出信号，如果我想要一个＆＃34; has-sub＆＃34;加载页面时默认打开的列表。例如，有没有办法修改我的代码，以便＆＃34;产品＆＃34;页面加载时默认打开。在这里，我希望所有列表项（例如产品1，产品2）都可见。但是，在同样的情况下，我希望隐藏其他列表（即田径和关于）。

以下是我的代码，这是我工作的链接：https://jsfiddle.net/mhav5gtf/

＆＃13;

( function( $ ) {
$( document ).ready(function() {
$('#Accordion ul ul li:odd').addClass('odd');
$('#Accordion ul ul li:even').addClass('even');
$('#Accordion > ul > li > a').click(function() {
  $('#Accordion li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#Accordion ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
} )( jQuery );

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Lato);
@charset "UTF-8";
/* Base Styles */

#Accordion ul li.test {
  border-bottom: 1px solid #c9c9c9;
}
#Accordion ul li.test a {
  background: #e5e5e5;
}
#Accordion ul li.test:last-child {
  border: none;
}
/*dont test*/

#Accordion,
#Accordion ul,
#Accordion li,
#Accordion a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
#Accordion a {
  line-height: 1.3;
  padding: 6px 15px;
}
#Accordion {
  width: 200px;
}
#Accordion > ul > li {
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid #4c4e53;
}
#Accordion > ul > li:last-child {
  border-bottom: 1px solid #3e3d3c;
}
#Accordion > ul > li > a {
  font-size: 13px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #64676e;
  background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));
  background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: linear-gradient(#64676e 0%, #4c4e53 100%);
}
#Accordion > ul > li > a:hover {
  text-decoration: none;
}
#Accordion > ul > li.active {
  border-bottom: none;
}
#Accordion > ul > li.active > a {
  background: #e6a83d!important;
  background: -moz-linear-gradient(#97c700 0%, #709400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));
  background: -webkit-linear-gradient(#97c700 0%, #709400 100%);
  background: linear-gradient(#97c700 0%, #709400 100%);
  color: #002855;
  text-shadow: none;
}
#Accordion > ul > li.has-sub > a:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
#Accordion > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #4e5800;
}
/* Sub menu */
#Accordion ul ul {
  padding: 0;
  display: none;
}
#Accordion ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
#Accordion ul ul li {
  border-bottom: 1px solid #c9c9c9;
}
#Accordion ul ul li.odd a {
  background: #e5e5e5;
}
#Accordion ul ul li:last-child {
  border: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Accordion"><img src="https://stephen-wisner-7fpk.squarespace.com/s/Sidebar-Menu-Programs.jpg">
<ul>
   <li></li>
   <li class="has-sub"><a href="#"><span>Athletics</span></a>
  <ul>
    <li class="even active"><a href="#"><span>Sports Offered</span></a></li>
    <li class="odd"><a href="#"><span>Directions to Events</span></a></li>
  </ul>
  </li>
   <li class="has-sub"><a href="#"><span>Products</span></a>
      <ul>
         <li class="even"><a href="#"><span>Product 1</span></a></li>
         <li class="odd"><a href="#"><span>Product 2</span></a></li>
         <li class="last even"><a href="#"><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class="has-sub"><a href="#"><span>About</span></a>
      <ul>
         <li class="odd"><a href="#"><span>Company</span></a></li>
         <li class="last even"><a href="#"><span>Contact</span></a></li>
      </ul>
   </li>
   <li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

＆＃13;

提前感谢您的协助。

Answer 1

将以下css添加到您的底部，然后只需确保要打开的li在您的html中具有类active：

#Accordion > ul > li.active > ul{
    display: block;
}


<li class="even active"><a href="#"><span>Sports Offered</span></a></li>

注意：为了使其正常工作，您需要删除ul顶部的空<li></li>。如果你有那里创建顶部黑色边框，你应该用CSS代替。 See this jsFiddle

默认打开手风琴菜单

1 个答案: