Код JQuery не отображает другой связанный список при получении идентификатора - PullRequest
Новая
       38

Код JQuery не отображает другой связанный список при получении идентификатора

0 голосов
/ 28 июня 2018

У меня есть большое мегаменю, которое я должен разместить на веб-сайте моей компании. Теперь проблема в том, что многие меню связаны со списком подменю. Я не могу составить sub ul / child список всех ограничений доступа к базе данных. Итак, идея заключалась в том, что это может быть возможно через 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>

1 Ответ

0 голосов
/ 28 июня 2018

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