javascript - 想要删除一个类并在兄弟标签中添加 SlideUp

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>

在这里，我想单击标题“Magento Extension”，它通常应该是同级副标题。但现在，当我单击标题时，它会刷新页面，并且副标题不会向上滑动。

我使用的代码是:

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

Answer 1

问题是 hasClass() 返回 bool 值，而不是 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>