如何使用jquery同时扩展导航条内容并更改导航条text_content？

Question

无论何时单击导航条，它都会更改导航条文本内容，并且导航条将同时展开，但扩展不起作用。能给我点提示吗？

​

$("nav").click(function() {
  $(this).html($(this).html() == 'chemistry' ? 'STUDENTS' : 'chemistry');
  $('.student-list').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header-bar">
  <div id="group-name" class="subject">chemistry</div>
  <ul class="student-list" style={display: "none";}>
    <li>jai</li>
    <li>lokesh</li>
  </ul>
</nav>

​

Answer 1

问题是您要替换nav标记的整个HTML。但是您只想替换#group-name的内容。

一个更好的方法是找到#group-name，并且只替换它的HTML。

​

$("nav").click(function() {
  var groupName = $(this).find('#group-name');
  groupName.html(groupName.html() == 'chemistry' ? 'STUDENTS' : 'chemistry');
  $('.student-list').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header-bar">
  <div id="group-name" class="subject">chemistry</div>
  
  <ul class="student-list">
    <li>jai</li>
    <li>lokesh</li>
  </ul>
</nav>

​