javascript - 单击时保持 jquery 菜单打开

Question

这似乎是一个常见问题，但我无法根据我的情况调整之前给出的答案。我有一个 jquery 垂直 Accordion 菜单，我想用它来导航两个站点:home.html 和research.html。我的 home.html 上的相关部分如下所示:

<div id="cssmenu">
<ul>
    <li class='active'><a href='index.html'>Home</a></li>
    <li><a href='research.html'>Research</a>
        <ul>
            <li><a href='research.html#r1'><span>interests</span></a></li>                      
            <li><a href='research.html#r2'><span>preprints</span></a></li>
            <li><a href='research.html#r3'><span>publications</span></a></li>
            <li><a href='research.html#r4'><span>coauthors</span></a></li>
        </ul>
    </li>
</ul>

这是我的 Research.html 的相关部分的样子:

<div id="cssmenu">
<ul>
    <li><a href='index.html'>Home</a></li>
    <li class='active'><a href='research.html'>Research</a>
        <ul>
            <li><a href='research.html#r1'><span>interests</span></a></li>                      
            <li><a href='research.html#r2'><span>preprints</span></a></li>
            <li><a href='research.html#r3'><span>publications</span></a></li>
            <li><a href='research.html#r4'><span>coauthors</span></a></li>
        </ul>
    </li>
</ul>

这是“我的”jquery 代码

$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, e){
    var count = $(e).find('li').length;
    var content = '<span class="cnt">' + '</span>';
    $(e).closest('li').children('a').append(content);
    });
$('#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'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }
    if($(this).closest('li').find('ul').children().length == 0) {
        return true;
    } else {
        return false;
    }
    });

如果我单击“研究”，子菜单会正常打开，如果我单击子菜单条目，则会加载页面上的相应位置。然而，之前打开的子菜单现在又被关闭了。我怎样才能避免这种行为？

非常感谢任何帮助，但请记住我不是网络程序员。

Answer 1

请尝试以下代码 我还更新了 fiddle

Demo Link

$(document).ready(function() {
  $('#cssmenu > ul > li ul').each(function(index, e) {
    var count = $(e).find('li').length;
    var content = '<span class="cnt">' + '</span>';
    $(e).closest('li').children('a').append(content);
  });
  $('#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'))) {
      $('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    if ($(this).closest('li').find('ul').children().length == 0) {
      return true;
    } else {
      return false;
    }
  });


  var hashTag = window.location.hash;
  if (hashTag != '') {
    $(hashTag).addClass('active');
  }

});

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  list-style: none;
  text-decoration: none;
}
#cssmenu {
  width: 325px;
  float: right;
  margin-top: 60px;
}
#cssmenu > ul {
  position: fixed;
}
#cssmenu > ul > li > a {
  font-size: 24px;
  font-weight: bold;
  font-family: Gill Sans;
  padding-bottom: 300px;
  color: #005D9A;
}
#cssmenu > ul > li > a > span {
  background: #FFFFFF;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {} #cssmenu > ul > li.active > a {
  color: #C80000;
}
#cssmenu > ul > li.active > a span {
  background: #FFFFFF;
}
#cssmenu span.cnt {
  padding: 0px;
  margin: 0px;
  background: none;
}
/* Sub menu */

#cssmenu ul ul {
  display: none;
  padding-bottom: 15px;
  padding-left: 0px;
}
#cssmenu ul ul li {} #cssmenu ul ul a {
  font-family: Avenir;
  font-size: 18px;
}
#cssmenu ul ul a:hover {
  color: #585858;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <ul>
    <li class='active'><a href='index.html'>Home</a>

    </li>
    <li id="research"><a href='research.html'>Research</a>

      <ul>
        <li><a href='research.html#rarticles'><span>interests</span></a>

        </li>
        <li><a href='research.html#rarticles'><span>preprints</span></a>

        </li>
        <li><a href='research.html#rarticles'><span>publications</span></a>

        </li>
        <li><a href='research.html#rarticles'><span>coauthors</span></a>

        </li>
      </ul>
    </li>
  </ul>
</div>