Question

我正在使用包含ul和li标签的side-nav。

看起来像：

<li>
    <a href="javascript:;">Mobile</a>
</li>
<li class="uk-nav-header">
    PLATFORM SPECIFIC GUIDES
</li>
<li class="uk-active uk-magento" data-toggle="collapse" data-target="#demo" aria-expanded="true" aria-controls="demo">
    <a href="/docs/magento">Magento Extension</a>
    <ul class="uk-nav-sub uk-nav-parent-mag hidden" >  
        <li><a href="#step1">1.Install Magento Extension</a></li>
        <li><a href="#step2">2.Configure extension</a></li>
        <li><a href="#step3">3.Launch Widgets</a></li>
        <li><a href="#faq">&nbsp;&nbsp;Frequently Asked Questions</a></li>   
    </ul>
</li>

在这里，我想点击标题＆＃34; Magento Extension＆＃34;通常应该滑动的是兄弟姐妹副标题。但现在，当我点击标题时，它会刷新页面并且副标题不会滑动。

我正在使用的代码是：

$(".uk-magento").click(function(e) {
  e.preventDefault();
  $(this).parent().siblings().hasClass('.uk-nav-parent-mag').removeClass("hidden", 400, "easeInBack");
});

Answer 1

问题是hasClass（）返回boolean值，而不是jQuery对象，因此下一个链式方法调用（.removeClass()）将失败。

uk-nav-parent-mag选择器也是错误的。

$(".uk-magento").click(function(e) {
  e.preventDefault();
  $(this).find('.uk-nav-parent-mag').removeClass("hidden", 400, "easeInBack");
});

.hidden {
  display: none
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<ul>
  <li>
    <a href="javascript:;">Mobile</a>
  </li>
  <li class="uk-nav-header">
    PLATFORM SPECIFIC GUIDES
  </li>
  <li class="uk-active uk-magento" data-toggle="collapse" data-target="#demo" aria-expanded="true" aria-controls="demo">
    <a href="/docs/magento">Magento Extension</a>
    <ul class="uk-nav-sub uk-nav-parent-mag hidden">

      <li><a href="#step1">1.Install Magento Extension</a></li>
      <li><a href="#step2">2.Configure extension</a></li>
      <li><a href="#step3">3.Launch Widgets</a></li>
      <li><a href="#faq">&nbsp;&nbsp;Frequently Asked Questions</a></li>

    </ul>
  </li>
</ul>

Answer 2

您的DOM结构对于您要实现的目标而言似乎非常复杂。

应该谨慎使用

parent（），siblings（）和hasClass（），并且只能在复杂DOM元素层次结构不可避免的情况下使用。

如果没有更多信息，很难说这个侧面导航如何适应页面其他部分的上下文，但这里有一些简化方法：

HTML：

<li> 
  <a href="javascript:;">Mobile</a> 
</li> 
<li class="uk-nav-header"> PLATFORM SPECIFIC GUIDES </li> 
<li class="uk-active uk-magento" data-toggle="collapse" data-target="#demo" aria-expanded="true" aria-controls="demo"> Magento Extension</li>
<ul class="uk-nav-sub uk-nav-parent-mag hidden" >
  <li><a href="#step1">1.Install Magento Extension</a></li> 
  <li><a href="#step2">2.Configure extension</a></li> 
  <li><a href="#step3">3.Launch Widgets</a></li> 
  <li><a href="#faq">&nbsp;&nbsp;Frequently Asked Questions</a></li>
</ul>

JS：

$(".uk-magento").on("click", function() {
  $(".uk-nav-parent-mag").toggleClass("hidden", 400, "easeInBack");
});

演示链接： http://codepen.io/anon/pen/dPYKea

想要删除一个类以及在兄弟标记中添加slideUp

2 个答案: