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>

如何使用jQuery同时扩展导航栏内容和更改导航栏text_content？

1 个答案: