如何通过获取ID名称,jQuery代码不会显示另一个链接列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (172)

我有一个大菜单,我必须把它放在我的公司网站上。现在的问题是,许多菜单与子菜单的列表相链接。我不能将数据库获取限制的每个li BCZ的子列表划分为UL/子列表。因此,我们的想法是,它可以通过JQuery实现。我确实想将子列表中每个列表的条件分别应用于打开。所以,我试着写一段智能代码,但它还没有起作用。

$(function() {
  $("#ms").hover(
    function() {
      $("#deptms").removeClass('hidden');
      $("#deptss").addClass('hidden');
    }
  );
  $("#ss").hover(
    function() {
      $("#deptss").removeClass('hidden');
      $("#deptms").addClass('hidden');
    }
  );
});
$(document).ready(function() {
  $('a.subparent').hover(function() {
    list = $(this).attr('id');
    $("#ul_" + list).removeClass('hidden');
  });
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-md-4 col-lg-4">
  <ul>
    <li class="waves-effect waves">
      <a href="" id="ms"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Management Sciences</a>
    </li>
    <li class="waves-effect waves">
      <a href="" id="ss"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Social Sciences</a>
    </li>
  </ul>
</div>
<div class="col-md-4 col-lg-4 subparent">
  <ul id="deptms" class="hidden">
    <li class="waves-effect waves">
      <a href="" id="ba"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Business Administration</a>
    </li>
    <li class="waves-effect waves">
      <a href="" id="mc"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Commerce</a>
    </li>
  </ul>
  <ul class="hidden" id="deptss">
    <li class="waves-effect waves">
      <a href="" id="eco"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Economics</a>
    </li>
    <li class="waves-effect waves">
      <a href="" id="psy"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Psychology</a>
    </li>
  </ul>
</div>

<div class="col-lg-3 col-md-3">
  <ul id="ul_ba" class="hidden">
    <li class="waves-effect waves">
      <a href="">Programs</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Key Personnels</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Research</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Student Counselling</a>
    </li>
  </ul>
  <ul id="ul_mc" class="hidden">
    <li class="waves-effect waves">
      <a href="">Programs</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Key Personnels</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Research</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Student Counselling</a>
    </li>
  </ul>
</div>

提问于
用户回答回答于

a.subparent是错误的选择器,因为subparent类是在<div>,而不是<a>

<a> 内部的选择器<div>.subparent a

$(function() {
  $("#ms").hover(
    function() {
      $("#deptms").removeClass('hidden');
      $("#deptss").addClass('hidden');
    }
  );
  $("#ss").hover(
    function() {
      $("#deptss").removeClass('hidden');
      $("#deptms").addClass('hidden');
    }
  );
});
$(document).ready(function() {
  $('.subparent a').hover(function() {
    list = $(this).attr('id');
    $("#ul_" + list).removeClass('hidden');
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-md-4 col-lg-4">
  <ul>
    <li class="waves-effect waves">
      <a href="" id="ms"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Management Sciences</a>
    </li>
    <li class="waves-effect waves">
      <a href="" id="ss"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Social Sciences</a>
    </li>
  </ul>
</div>
<div class="col-md-4 col-lg-4 subparent">
  <ul id="deptms" class="hidden">
    <li class="waves-effect waves">
      <a href="" id="ba"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Business Administration</a>
    </li>
    <li class="waves-effect waves">
      <a href="" id="mc"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Commerce</a>
    </li>
  </ul>
  <ul class="hidden" id="deptss">
    <li class="waves-effect waves">
      <a href="" id="eco"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Economics</a>
    </li>
    <li class="waves-effect waves">
      <a href="" id="psy"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Psychology</a>
    </li>
  </ul>
</div>

<div class="col-lg-3 col-md-3">
  <ul id="ul_ba" class="hidden">
    <li class="waves-effect waves">
      <a href="">Programs</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Key Personnels</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Research</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Student Counselling</a>
    </li>
  </ul>
  <ul id="ul_mc" class="hidden">
    <li class="waves-effect waves">
      <a href="">Programs</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Key Personnels</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Research</a>
    </li>
    <li class="waves-effect waves">
      <a href="">Student Counselling</a>
    </li>
  </ul>
</div>

扫码关注云+社区

领取腾讯云代金券