Question

我有一个侧边栏，其中包含链接和子链接这是我的代码 -

<div id="mySidenav" class="sidenav">
  <ul style='list-style:none;'>
    <li><a href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a></li>
    <li id='post_list'> <a href="#">Posts</a>
      <ul style='list-style:none;' id='sub_links'>
        <li><a href='<?php echo site_url('admin/all_posts'); ?>'>All</a></li>
        <li><a href='<?php echo site_url('admin/add_post'); ?>'>Add</a></li>
        <li><a href='<?php echo site_url('admin/post_categories'); ?>'>Category</a></li>
      </ul>
    </li>
    <li id='post_list'> <a href="#">Pages</a>
      <ul style='list-style:none;' id='sub_links'>
        <li><a href='<?php echo site_url('admin/all_pages'); ?>'>All</a></li>
        <li><a href='<?php echo site_url('admin/add_page'); ?>'>Add</a></li>
      </ul>
    </li>
    <li><a href="#" class='media_upload'>Media</a></li>
    <li id='post_list'> <a href="#">User</a>
      <ul style='list-style:none;' id='sub_links'>
        <li><a href='<?php echo site_url('admin/all_users'); ?>'>All</a></li>
        <li><a href='<?php echo site_url('admin/add_new_user'); ?>'>Add</a></li>
        <li><a href='<?php echo site_url('admin/user_profile'); ?>'>Profile</a></li>
      </ul>
    </li>
    <li><a href="#">Setting</a></li>
    <li><a href="<?php echo site_url('admin/logout')?>">Logout</a></li>
  </ul>
</div>
</div>
</div>
</div>

我的问题是如何在点击子li时将活动类设置为父li？感谢。

Answer 1

使用此代码。

 $('#mySidenav ul ul li').on('click',function(){
   $(this).closest('li').addClass('active');
 });

解释：选择器#mySidenav ul ul li将确保选择最里面的li标记，点击此li标记，$(this).closest('li')将找到父li，即：点击的li代码中距离最近的li标记，并使用active

将类.addClass('active')添加到其中

旁注：另外请确保您在HTML中没有重复的ID。 id='post_list'和id='sub_links'。 HTML中的ID是唯一的，否则在选择器中使用此ID编写jquery或css时可能会遇到问题。

Answer 2

首先，您的id 必须是unqe！如果我是你，我会将id属性更改为class，如下所示：< / p>

<div id="mySidenav" class="sidenav">
  <ul style='list-style:none;'>
    <li>
      <a href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a>
    </li>
    <li class='post_list'> 
      <a href="#">Posts</a>
      <ul style='list-style:none;' class='sub_links'>
        <li>
          <a href='<?php echo site_url(' admin/all_posts '); ?>'>All</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

然后在你的JS文件中：

$(".sub_links li").on("click", function(){
    $(this).closest(".post_list").addClass('active');
});

你去，应该工作

Answer 3

首先，将您的身份Int8Array转换为课程。

您可以使用jQuery的sub_links方法解决您的问题

parents()

这是一个小提琴： jsfiddle

Answer 4

假设sub_links有一个激活的li类，请在页面就绪时执行此操作：

$('li.active').parent().closest('li').addClass('active');

 $('li.active').parent().closest('li').addClass('active');

.active > a {color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
  <ul style='list-style:none;'>
    <li>
      <a href="">Dashboard</a>
    </li>
    <li id='post_list'> 
      <a href="#">Posts</a>
      <ul style='list-style:none;' id='sub_links'>
        <li>
          <a href=''>All</a>
        </li>
        <li>
          <a href=''>Add</a>
        </li>
        <li>
          <a href="">Category</a>
        </li>
      </ul>
    </li>
    <li id='post_list'>
      <a href="#">Pages</a>
      <ul style='list-style:none;' id='sub_links'>
        <li>
          <a href=''>All</a>
        </li>
        <li>
          <a href=''>Add</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class='media_upload'>Media</a>
    </li>
    <li id='post_list'> 
      <a href="#">User</a>
      <ul style='list-style:none;' id='sub_links'>
        <li class="active">
          <a href=''>All</a>
        </li>
        <li>
          <a href=''>Add</a>
        </li>
        <li>
          <a href=''>Profile</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Setting</a>
    </li>
    <li>
      <a href="">Logout</a>
    </li>
  </ul>
</div>
</div>
</div>
</div>

如何使用jquery突出显示父<li>当孩子</li> <li>处于活动状态时

4 个答案: