부트스트랩:드롭다운 탐색 부모 링크를 활성화하려면 어떻게 해야 합니까?

부트스트랩:드롭다운 탐색 부모 링크를 활성화하려면 어떻게 해야 합니까?

WP 설치에서 Bootstrap을 실행하고 있는데 부모 드롭다운 내비게이션 항목에서 URL이 제거되는 문제가 있습니다.

여기 암호가 있습니다.menu-item-72에서 우리 팀의 href는 적절한 링크가 아닌 단지 #임을 알 수 있습니다.

<ul id="menu-primary" class="nav navbar-nav">
 <li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-69"><a title="Home" href="http://mostellar.opteradev.com/">Home</a></li>
 <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-70 active"><a title="About Us" href="http://mostellar.opteradev.com/us/">About Us</a></li>
 <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-72 dropdown"><a title="Our Team" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Our Team <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
    <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a title="Katherine M. Conwell, CPA" href="http://mostellar.opteradev.com/katherine-m-conwell/">Katherine M. Conwell, CPA</a></li>
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="Ann S. Bowers, CPA" href="http://mostellar.opteradev.com/our-team/ann-s-bowers/">Ann S. Bowers, CPA</a></li>
    <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="John B. Mostellar, CPA" href="http://mostellar.opteradev.com/our-team/john-b-mostellar/">John B. Mostellar, CPA</a></li>
    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Lewis T. Shreve, CPA" href="http://mostellar.opteradev.com/our-team/lewis-t-shreve/">Lewis T. Shreve, CPA</a></li>
 </ul>
</li>
</ul>

이것을 작동시키기 위해 무엇이 부족합니까?아이템이 액티브 엔트리와 관련되어 있는 것을 확인했습니다.

기본적으로 드롭다운의 부트스트랩 상위 항목은 클릭할 수 없습니다.페이지에 이 스크립트를 추가하면 다음과 같이 됩니다.

<script>
jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

});

$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});

});
</script>

이 솔루션에 대한 공적은 http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/에 있습니다.

저는 이렇게 동작했습니다.wp-bootstrap-navwalker를 사용하시는 것 같습니다.

wp-bootstrap-navwalker를 엽니다.php를 에디터와 함께 찾아보세요.

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href']        = '#';
   $atts['data-toggle'] = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

이 코드를 다음으로 변경합니다.

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
   //$atts['data-toggle']   = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

주의: $att['href']가 활성화 되어 있고 $atts['data-togle']가 비활성화되어 부모 링크를 클릭할 수 있게 됩니다.

이제 style.css를 열고 이 코드를 추가하여 드롭다운 및 클릭 가능한 부모 메뉴에서 WordPress 메뉴의 호버 기능을 활성화합니다.

.dropdown:hover .dropdown-menu {
    display: block;
}

참고: 작은 화면이 있는 작은 장치에서는 메뉴의 동작이 약간 변경됩니다.추가 jQuery는 필요하지 않습니다.

이를 설정하려면 data-setup="setup"을 삭제하고 data-setup="setup"을 설정합니다.

Sohail Qureshi의 솔루션에 추가하기 위해 파일을 조금 더 수정했습니다.다음은 부모 링크를 실제 링크로 변환하는 방법입니다.

wp-bootstrap-navwalker.disc에서 다음 코드를 변경합니다.

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href']        = '#';
   $atts['data-toggle'] = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

대상:

    // If item has_children add atts to a.
    if ( $args->has_children && $depth === 0 ) {
        $atts['href']           = ( $item->url );
        $atts['data-toggle']    = 'dropdown';
        $atts['class']          = 'dropdown-toggle disabled';
        $atts['aria-haspopup']  = 'true';
    } else {
        $atts['href'] = ! empty( $item->url ) ? $item->url : '';
    }

이제 부모 링크를 클릭할 수 있고 실제로 페이지에 링크할 수 있습니다!

2018년 5월 이 솔루션은 나에게 효과가 있었다.

class-wp-bootstrap-navwalker.php 파일로 이동합니다.-> 코멘트 행 185

// $atts['href']          = '#';

그리고 이 코드를 붙여라.

$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle']   = 'hover';

즐거운 시간 되세요.

아래 코드는 DRAPDOWN에서 클릭 가능한 링크를 쉽게 사용할 수 있습니다.

onClick="parent.location='http://www.plus2net.com/'"

// 와!!!이 코드는 정상적으로 동작하고 있습니다.프로젝트의 올바른 위치에 붙여넣기만 하면 됩니다.// 항목에 _ children이 있는 경우 a에 특성을 추가합니다.

if ( $args->has_children && $depth === 0 ) {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
   //$atts['data-toggle']   = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

언급URL : https://stackoverflow.com/questions/25692514/bootstrap-how-do-i-make-dropdown-navigation-parent-links-an-active-link