Question

我是jquery和手风琴的新手，我想知道是否有人可以帮助我。我有一个我在网上找到的手风琴脚本，但我希望它的行为有点不同。当我点击父链接说（东英格兰）及其所有子链接显示在下面，我点击一个子链接（例如埃塞克斯）和埃塞克斯页面加载，我希望东英格兰父链接仍然显示其子，但不是崩溃。如果我从另一个父链接点击另一个孩子，我希望该父链接仍然在导航栏中显示其所有子链接。

代码如下：

<html>
<head>
<style type = "text/css">
@import url(http://fonts.googleapis.com/css?family=Lato);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu 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;
}
#cssmenu a {
  line-height: 1.3;
  padding: 6px 15px;
}
#cssmenu {
  width: 190px;
}
#cssmenu > ul > li {
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid #4c4e53;
}
#cssmenu > ul > li:last-child {
  border-bottom: 1px solid #3e3d3c;
}
#cssmenu > 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%);
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  background: #97c700;
  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: #4e5800;
  text-shadow: 0 1px 1px #709400;
}
#cssmenu > ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #4e5800;
}
/* Sub menu */
#cssmenu ul ul {
  padding: 0;
  display: none;
}
#cssmenu ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
#cssmenu ul ul li {
  border-bottom: 1px solid #c9c9c9;
}
#cssmenu ul ul li.odd a {
  background: #e5e5e5;
}
#cssmenu ul ul li:last-child {
  border: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='eastengland.php'><span>East England</span></a>
      <ul>
         <li><a href='essex.php'><span>Essex</span></a></li>
         <li><a href='#'><span>Hertfordshire</span></a></li>
         <li><a href='#'><span>Bedfordshire</span></a></li>
         <li><a href='#'><span>Cambridgeshire</span></a></li>
         <li><a href='#'><span>Norfolk</span></a></li>
         <li class='last'><a href='#'><span>Suffolk</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>East Midlands</span></a>
      <ul>
         <li><a href='#'><span>Derbyshire</span></a></li>
         <li><a href='#'><span>Nottinghamshire</span></a></li>
         <li><a href='#'><span>Lincolnshire</span></a></li>
         <li><a href='#'><span>Leicestershire</span></a></li>
         <li><a href='#'><span>Rutland</span></a></li>
         <li class='last'><a href='#'><span>Northamtonshire</span></a></li>
      </ul>
   </li>
   <li ><a href='london.php'><span>London</span></a></li>
    <ul>
        <li><a href='#'><span>London</span></a></li>
    </ul>

   <li class='has-sub'><a href='#'><span>North East England</span></a>
      <ul>
         <li><a href='#'><span>Northumberland</span></a></li>
         <li><a href='#'><span>Tyne and Wear</span></a></li>
         <li><a href='#'><span>Durham</span></a></li>
         <li class='last'><a href='#'><span>North Yorkshire</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>North West England</span></a>
      <ul>
         <li><a href='#'><span>Cheshire</span></a></li>
         <li><a href='#'><span>Cumbria</span></a></li>
         <li><a href='#'><span>Greater Manchester</span></a></li>
         <li><a href='#'><span>Lancanshire</span></a></li>
         <li class='last'><a href='#'><span>Merseyside</span></a></li>
      </ul>
   </li>
</ul>
</div>
</html>

Jquery code

<script>
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu 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'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
</script>

我将不胜感激。

谢谢

Answer 1

更改为：

$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu 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'))) {
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});

卸下：

$('#cssmenu ul ul:visible').slideUp('normal');

<强> JSFiddle Demo

Accordion根据网址更改所选链接

1 个答案: