메뉴 드롭 다운에서 부모 클래스 변경

사용자가 'w - 현재'라는 현재 클래스를 아래로 스크롤 할 때 메뉴가 하나의 최상위 레벨 및 하위 메뉴 항목에 자동으로 추가되지만 메뉴는 표시되지 않습니다. 하위 메뉴 자체의 최상위/상위 항목에 자동으로 추가됩니다. 사용자가 메뉴 항목에있을 경우 메뉴 부모 링크가 CSS를 통해 강조 표시되도록 사용자가 아래로 스크롤 할 때이를 확실히하고 싶습니다.메뉴 드롭 다운에서 부모 클래스 변경

메뉴 HTML

<nav class="nav-menu w-nav-menu" role="navigation"> 
<a class="nav-link w-nav-link w--current" href="#home" style="max-width: 1100px;">Home</a><div class="dropdown w-dropdown" data-delay="0" style="max-width: 1100px;"><div class="nav-link nav-link-dropdown w-dropdown-toggle"><div class="nav-dropdown-arrow w-icon-dropdown-toggle"></div><div>Our Home</div></div><nav class="dropdown-list w-clearfix w-dropdown-list"> 
<a class="nav-dropdown-link w-dropdown-link" href="#history">History</a><a class="nav-dropdown-link w-dropdown-link" href="#facilities">Facilities &amp; Care</a><a class="nav-dropdown-link w-dropdown-link" href="#activities">Activities at the heart of care</a> 
<a class="nav-dropdown-link w-dropdown-link" href="#food">Food Glorious Food</a></nav></div> 
<a class="nav-link w-nav-link" href="#gallery" style="max-width: 1100px;">Gallery</a> 
<a class="nav-link w-nav-link" href="#family" style="max-width: 1100px;">Our Family</a> 
<a class="nav-link w-nav-link" href="#reviews" style="max-width: 1100px;">Reviews</a> 
<a class="nav-link w-nav-link" href="#news" style="max-width: 1100px;">News</a> 
<a class="highlight nav-link w-nav-link" href="#contact" style="max-width: 1100px;">Contact</a> 
</nav>

실제로이 부분적으로 여기 데모 작업을

: -

http://silveroaks.webflow.io/

...하지만 하나 개의 하위 메뉴 및 이동 전달이있는 경우에만 나는 둘 이상을 가질 것이다.

이

는 기존의 코드입니다 : -

<script> 
jQuery(window).on("focus load resize scroll",function(e){ 
jQuery(document).ready(function($){ 
if ($('.dropdown .nav-dropdown-link.w--current').length > 0) { 
$(".nav-dropdown-link.w--current").parents(".dropdown").addClass("dcurrent"); 
} 
else { 
// this bit currently removes the class from all submenus 
$(".dropdown").removeClass("dcurrent"); 
} 
}); 
}); 
    </script>

CSS

.dcurrent > .nav-link { 
color: white; 
background: #005b2f; 
}

당신은 if 문이 보편적으로 이 경우 작동하지 않습니다 어떤 .dropdown에서 클래스 'dcurrent'을 제거하는 것을주의 할 것이다 하나 이상의 드롭 다운이 있습니다. 그렇다면 코드를 재 작성하여 여러 개의 드롭 다운에서 작동하도록 할 수 있습니다. 따라서 둘 이상의 클래스가있는 경우 사용자가 각 하위 메뉴를 넘어 스크롤 할 때 클래스를 제거합니다.

출처

2017-09-21 glennyboy

'과 노력이 같은 first' :. 항법 드롭 다운-link.w "'$ (- 현재 ") .parents (". dropdown : first "). addClass ("dcurrent "); ' –

방정식의'else '부분은 무엇입니까? (하나 이상의 최상위 하위 메뉴에서 작동하지 않는 비트) – glennyboy

if 파트가 원하는대로 작동 했습니까? @glennyboy, –

는 각 클래스의 요소를 반복하고 다음과 같이 차일이 있는지 확인할 수 있습니다 :

$('.dropdown .nav-dropdown-link.w--current').each(function() { 
     if ($(this).length) { 
      $(this).parents(".dropdown").addClass("dcurrent"); 
     } else { 
      // this bit currently removes the class from all submenus 
      $(this).parents(".dropdown").removeClass("dcurrent"); 
     } 
})

출처

2017-09-21 13:05:25 SilverSurfer

기쁨이 없습니다. 일단 하위 메뉴의 모든 요소를 스크롤하면 현재 클래스가 제거되지 않습니다. dev 사이트 http://silveroaks.webflow.io/에서이 라이브를 볼 수 있습니다. 아래로 스크롤 할 때 드롭 다운에서 – glennyboy

메뉴 드롭 다운에서 부모 클래스 변경

답변

관련 문제