選擇其他項目時刪除切換課程

在我的移動網站上，我有一個垂直下拉菜單（如手風琴），其中每個父項目都具有向下箭頭以指示下拉菜單。當用戶點擊父項時，箭頭會旋轉，當您再次單擊它時關閉下拉菜單，它會旋轉回原來的狀態。但是，如果您不單擊下拉菜單關閉它，而只需單擊另一個父項目，則下拉菜單將關閉，但箭頭會保持在旋轉的位置。下面是代碼：選擇其他項目時刪除切換課程

$('li.nav-about').click(function() { 
     $('#arrow-about').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

$(' li.nav-industry').click(function() { 
     $('#arrow-indusrty').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

$('li.nav-application').click(function() { 
     $('#arrow-application').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    });

任何建議如何被點擊另一個項目時，刪除「旋轉」類？

編輯下面是標記了的樣子：

<ul id="nav-list"> 

    <li class="nav-list_item nav-about"><a href="#">About Us</a><div class="arrow-down" id="arrow-about"></div> 
    <ul> 
    <li>....</li> 
    <li>...</li> 
    <li>...</li> 
    </ul> 
</li> 


<li class="nav-list_item nav-products"><a href="#">Products</a><div class="arrow-down" id="arrow-products"></div> 

    <ul> 
    <li>....</li> 
    <li>...</li> 
    <li>...</li> 
    </ul> 
</li>

來源

2015-09-24 MariaL

有更好的解決方案，我們可以建議，如果你分享標記。 –

您可以從每個按鈕刪除存在rotate類切換當前像以前一樣：

$('li.nav-about').click(function() { 
     $('.rotate:not("#arrow-about")').removeClass("rotate"); 
     $('#arrow-about').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
}); 

(' li.nav-industry').click(function() { 
     $('.rotate:not("#arrow-indusrty")').removeClass("rotate"); 
     $('#arrow-indusrty').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

$('li.nav-application').click(function() { 
     $('.rotate:not("#arrow-application")').removeClass("rotate"); 
     $('#arrow-application').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    });

來源

2015-09-24 15:40:19

我試過這個，它可以工作，但是當你點擊父項時它不會迴旋。因此，例如，如果我已打開「about」並再次單擊它關閉它，則箭頭不會旋轉回來。如果我點擊'行業'雖然它確實 – MariaL

@MariaL實施，以避免本身 –

輝煌，謝謝！完美的作品！ – MariaL

如果您不想更改太多的代碼，只需嘗試一下。

$('li.nav-about').click(function() { 
    $('#arrow-about').toggleClass("rotate"); 
    $('#arrow-indusrty').removeClass("rotate"); 
    $('#arrow-application').removeClass("rotate"); 
    $(this).find('ul').toggle(); 
}); 

$(' li.nav-industry').click(function() { 
    $('#arrow-about').removeClass("rotate"); 
    $('#arrow-indusrty').toggleClass("rotate"); 
    $('#arrow-application').removeClass("rotate"); 
    $(this).find('ul').toggle(); 
}); 

$('li.nav-application').click(function() { 
    $('#arrow-about').removeClass("rotate"); 
    $('#arrow-indusrty').removeClass("rotate"); 
    $('#arrow-application').toggleClass("rotate"); 
    $(this).find('ul').toggle(); 
});

現在您確定每個元素，而不是選定的元素，都將轉爲其原始狀態。

來源

2015-09-24 15:43:28 QBernard

你可以這樣做。

var toggleNavigation = function(){ 
    var r_navigation = $('li.nav-about,li.nav-industry,li.nav-application'); 

    $(r_navigation).each(function(i, oNav){ 
     $(oNav).on('click',function(){ 
      if(!$(oNav).hasClass('rotate')){ 
       $(r_navigation).removeClass('rotate'); 
       $(oNav).addClass('rotate'); 
      }else{ 
       $(oNav).removeClass('rotate'); 
      } 
     }); 
    }); 
};

來源

2015-09-24 15:55:23 DRGA

選擇其他項目時刪除切換課程

回答

相關問題