Question

我尝试使用我在下面的帖子中附加的jquery代码。我不知道代码是否遗漏了什么，但到目前为止还没有运气。如果您可以重新创建新的编码，请提供帮助。谢谢。

＆＃13;

$(document).ready(function() {
  $('.wsite-menu-wrap ul li .wsite-menu-subitem.active').parent().closest('.sidebar-nav .dropdown').addClass('active');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav sidebar-nav">
  <div class="nav-wrap">
    <ul class="wsite-menu-default">
      <li class="wsite-menu-item-wrap has-submenu">
        <div class="dropdown open">
          <span class="dropdown-link"><a href="/women" class="wsite-menu-item **ADD 'ACTIVE' HERE**">WOMEN</a></span>
        </div>
        <div class="wsite-menu-wrap">
          <ul class="wsite-menu">
            <li class="wsite-menu-subitem-wrap ">
              <a href="/accessory" class="wsite-menu-subitem ***active***">ACCESSORY</a>
            </li>
            <li class="wsite-menu-subitem-wrap ">
              <a href="/dress" class="wsite-menu-subitem ">DRESS</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 1

您可以导航回最近的li.has-submenu submenu，它将成为a的根父级，然后找到相关的addClass标记，如下所示$(document).ready(function() { $('.wsite-menu-wrap ul li .wsite-menu-subitem.active').closest('li.has-submenu').find('.dropdown-link a').addClass('active'); });。

.active{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav sidebar-nav">
  <div class="nav-wrap">
    <ul class="wsite-menu-default">
      <li class="wsite-menu-item-wrap has-submenu">
        <div class="dropdown open">
          <span class="dropdown-link"><a href="/women" class="wsite-menu-item">WOMEN</a></span>
        </div>
        <div class="wsite-menu-wrap">
          <ul class="wsite-menu">
            <li class="wsite-menu-subitem-wrap ">
              <a href="/accessory" class="wsite-menu-subitem active">ACCESSORY</a>
            </li>
            <li class="wsite-menu-subitem-wrap ">
              <a href="/dress" class="wsite-menu-subitem ">DRESS</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

# Module polynoms

"""
Contains a Polynom class, in which a polynom is basically the list of its 
coefficients.
Also contains object methods that help adding two polynoms (they will be 
turned into __add__
and other special methods soon, this was the first version I have written.)

pln is an abbreviation for Polynom.
"""

from functools import wraps
# I was told in a tutorial to import this function
# in order to keep information about the methods I need to decorate.

class Polynom :
""" A way to represent polynoms """

def __init__(self,*coeff) :
    print(list(*coeff))
    for i in list(*coeff) :
        assert type(i) == float or type(i) == int
    assert len(*coeff) > 0

    self.coeff = list(*coeff) # Only one attribute

def __repr__(self) :
    return str(self.coeff)

def verif_pln(f) :
    """ Decorator that verifies
    that the arguments given to f are polynoms. """

    @wraps
    def wrapper(*arg_f) :
        try :
            for i in arg_f :
                type(i) == Polynom
        except AssertionError :
            print("Enter a valid Polynom")
    return wrapper


@verif_pln
def degre(P) :
    """ Renvoie le degré du polynôme."""
    if P == [0] :
        return "-infini"
    return len(P)-1

@verif_pln
def somme(P,Q) :
    """ Adds two polynoms. """
    S = [ 0 for i in range(max(len(P),len(Q)))]
    for i in range(min(len(P),len(Q))) :
        S[i] = P[i] + Q[i]
    return S


def prod_sc(P,k) :
    """ Multiply P by a number k. """
    P2=[]
    for p in P :
        p*=k
        P2.append(p)
    return P2

Answer 2

将其更改为此

$(document).ready(function(){
   $('.wsite-menu-subitem.active').parents().find('a.wsite-menu-item').addClass('active');
});

Answer 3

我认为在DOM树上搜索并不是一个好习惯。 jQuery是为了按类或id挂钩而构建的。对于每个子菜单项，我添加了一个类'womens'，'mens'，然后在标题链接中添加了相同名称的ID。当您单击任何子菜单项时，它会突出显示标题标题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
  .active {
    color: orange;
  }
</style>

<div class="nav sidebar-nav">
  <div class="nav-wrap">
    <ul class="wsite-menu-default">
      <li class="wsite-menu-item-wrap has-submenu">
        <div class="dropdown open">
          <span class="dropdown-link">
            <a id="womens" href="#" class="wsite-menu-item active">WOMEN</a>
          </span>
        </div>
        <div class="wsite-menu-wrap">
          <ul class="wsite-menu">
            <li class="wsite-menu-subitem-wrap">
              <a href="#" class="wsite-menu-subitem womens active">ACCESSORY</a>
            </li>
            <li class="wsite-menu-subitem-wrap ">
              <a href="#" class="wsite-menu-subitem womens">DRESS</a>
            </li>
            <li class="wsite-menu-subitem-wrap ">
              <a href="#" class="wsite-menu-subitem womens">SHOES</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="wsite-menu-item-wrap has-submenu">
        <div class="dropdown open">
          <span class="dropdown-link">
            <a id="mens" href="#" class="wsite-menu-item">MEN</a>
          </span>
        </div>
        <div class="wsite-menu-wrap">
          <ul class="wsite-menu">
            <li class="wsite-menu-subitem-wrap ">
              <a href="#" class="wsite-menu-subitem mens">WATCHES</a>
            </li>
            <li class="wsite-menu-subitem-wrap ">
              <a href="#" class="wsite-menu-subitem mens">PANTS</a>
            </li>
            <li class="wsite-menu-subitem-wrap ">
              <a href="#" class="wsite-menu-subitem mens">SHOES</a>
            </li>
          </ul>
        </div>
      </li>

    </ul>
  </div>
</div>

<script>
  $(document).ready(function() {

    $('.wsite-menu-subitem').on('click', function(){
      $('.wsite-menu-subitem').removeClass('active')
      let self = $(this)
      self.addClass('active')
      if (self.hasClass('mens')) {
        $('#mens').addClass('active')
        $('#womens').removeClass('active')
      }
      if (self.hasClass('womens')) {
        $('#womens').addClass('active')
        $('#mens').removeClass('active')
      }
    })

  });
</script>

如何添加活跃的＆＃39;当子菜单已经“活动”时，将菜单设为父级

3 个答案: