Question

这似乎是一个常见问题，但我无法根据我的情况调整先前给出的答案。我有一个jquery垂直手风琴菜单，我想用它来导航两个网站home.html和research.html。以下是我home.html上相关部分的外观：

UILabel

以下是我的research.html相关部分的外观：

updateConstraints

这里＆＃34;我的＆＃34; jquery-code

<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>

如果单击“研究”，子菜单就会打开，如果单击子菜单项，则会加载页面上的相应位置。但是，先前打开的子菜单现在再次关闭。我该如何避免这种行为？

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

Answer 1

请尝试以下代码我还更新了小提琴

Demo Link

＆＃13;

$(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');
  }

});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

点击后保持jquery菜单打开

1 个答案: