想要刪除一個類，並在兄弟標籤中添加slideUp

我正在使用包含ul和li標籤的side-nav。想要刪除一個類，並在兄弟標籤中添加slideUp

的樣子：

<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的擴展」，它通常應該slidesup是兄弟姐妹副標題。但現在當我點擊標題刷新頁面和副標題arent滑上。我使用

代碼是：

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

來源

2014-12-03 Akash Pathak

問題是hasClass（）返回布爾值，而不是一個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>

來源

2014-12-03 07:01:32

您的代碼運行良好。但是當我點擊標題「Magento Extension」時，它的href將它定位到「/ docs/magento」並刷新頁面。所以我找不到任何removeClass動作 – 2014-12-03 07:13:01

@AkashPathak在你的瀏覽器控制檯中是否有任何錯誤 – 2014-12-03 07:14:00

不，我不能看到任何控制檯錯誤。但是它的默認功能。李標籤一次不能做2件事。它必須定位一個頁面，並且必須在其兄弟中刪除類別。 – 2014-12-03 07:16:49

你的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

來源

2014-12-03 07:53:39

想要刪除一個類，並在兄弟標籤中添加slideUp

回答

相關問題