Question

我有2个问题：

我正在尝试创建一个点击事件，检测到“导航”菜单的点击，这会触发对打开列表元素的取消选择并撤回其相应的下拉内容。
我当前的代码不允许添加其他没有下拉内容的列表元素/导航项，因为这样做会妨碍整个代码的正常运行。我想添加另一个没有下拉列表内容的“ nav”列表元素，而又不妨碍其他列表元素及其各自下拉列表内容的功能。

HTML

<div id="nav">
  <ul class="nav-ul">
    <li class="" rel="pay1">Color</li>
    <li rel="pay2">Shape</li>
    <li rel="pay3">Size</li>
  </ul>
  <div class="substitute">
    <div id="pay1" class="sub-child">
      <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>
    </div>
    <div id="pay2" class="sub-child">
      <ul>
        <li>Square</li>
        <li>Circle</li>
        <li>Triangle</li>
        <li>Diamond</li>
      </ul>
    </div>
    <div id="pay3" class="sub-child">
      <ul>
        <li>Small</li>
        <li>Medium</li>
        <li>Large</li>
      </ul>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
#nav {
  background-color: /*blue*/;
  float: right;
}
#nav .nav-ul {
  list-style: none;
  float: right;
  background-color: /*yellow*/;
  border-left: solid 2px #000000;
  border-right: solid 2px #000000;
}
#nav .nav-ul li {
  float: left;
  padding: 4px;
  font-weight: bold;
  color: #000000;
}
#nav .nav-ul li:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #E51D27;
}
#nav .nav-ul li.detected {
  color: #E51D27;
}

#nav .substitute {
  float: right;
  background-color: /*pink*/;
  margin-right: 4px;
}
#nav .substitute .sub-child {
  float: left;
  display: none;
}
#nav .substitute .sub-child.active {
  display: block;
}


#nav .substitute .sub-child ul {
  list-style: none;
}
#nav .substitute .sub-child ul li {
  float: left;
  padding: 4px;
}

JQuery

$(function() {

    function animate() {
    $('#nav .nav-ul li').off('click', animate)
    var $detected = $(this).closest('.nav-ul');
    $detected.find('li.detected').removeClass('detected');
    $(this).addClass('detected');

    //figure out which rel to show
    var ulToShow = $(this).attr('rel');

    //hide current rel
    if ($('.substitute .sub-child.active').length > 0) {
      $('.substitute .sub-child.active').hide(700, function() {
        $(this).removeClass('active');
        $('#'+ulToShow).fadeIn(528, function() {
          $(this).addClass('active');
          $('#nav .nav-ul li').on('click', animate)

        });
      });
    } else {
        $('#'+ulToShow).fadeIn(528, function() {
          $(this).addClass('active');
          $('#nav .nav-ul li').on('click', animate)
        });
    }
  }

    $('#nav .nav-ul li').on('click', animate);
});

jQuery导航菜单问题

0 个答案: