트위터 부트 스트랩 드롭 다운 토글 링크를 클릭하도록 허용 하시겠습니까?

트위터 부트 스트랩 드롭 다운 토글 링크를 클릭하도록 허용 하시겠습니까?

---

우리는 hover에 대해 작동하도록 twitter 부트 스트랩 드롭 다운을 설정했습니다 ([예, 터치 장치에서 hover가 없다는 것을 알고 있습니다]를 클릭하는 것과는 반대로). 그러나 우리는 그것을 클릭 할 때 메인 링크가 작동 할 수 있기를 원합니다.

기본적으로 트위터 부트 스트랩은이를 차단하므로 어떻게 다시 활성화 할 수 있습니까?

---

앵커의 클래스로 disabled 를 추가 하십시오.

<a class="dropdown-toggle disabled" href="http://google.com">
    Dropdown <b class="caret"></b></a>

따라서 다음과 같이 모두 함께 :

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>

---

"하위 메뉴가 아래로 내려 가지 않는다"에 대해 불평하시는 분들을 위해 저는이 방법으로 해결했습니다.

1) 당신 외에

<a class="dropdown-toggle disabled" href="http://google.com">
     Dropdown <b class="caret"></b>
</a>

새로 넣어

<a class="dropdown-toggle"><b class="caret"></b></a>

<b class="caret"></b>태그를 제거 하면 다음과 같이 보일 것입니다.

<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>

2) 다음 CSS 규칙으로 스타일을 지정하십시오.

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

.caret1 클래스의 스타일 li은 오른쪽 모서리에있는.

두 번째 스타일은 드롭 다운 오른쪽에 패딩을 추가하여 캐럿을 배치하여 메뉴 항목의 텍스트가 겹치는 것을 방지하는 것입니다.

이제 데스크톱 및 모바일 버전 모두에서 멋지게 보이고 텍스트 또는 캐럿을 클릭하는지에 따라 클릭 및 드롭 다운 가능한 멋진 반응 형 메뉴 항목이 있습니다.

---

실제로 작동하는 답변이 없거나 (선택한 답변은 드롭 다운을 비활성화 함) 자바 스크립트를 사용하여 재정의하므로 여기에 있습니다.

이것은 모두 html 및 css 수정입니다 (두 개의 <a>태그 사용).

<ul class="nav">
 <li class="dropdown dropdown-li">
    <a class="dropdown-link" href="http://google.com">Dropdown</a>
    <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
 </li>
</ul>

이제 필요한 CSS가 있습니다.

.dropdown-li {
    display:inline-block !important;
}
.dropdown-link {
    display:inline-block !important; 
    padding-right:4px !important;
}
.dropdown-caret {
    display:inline-block !important; 
    padding-left:4px !important;
}

둘 <a>중 하나를 가리키면 두 태그가 모두 강조 표시 되기를 원한다고 가정하면 부트 스트랩을 재정의해야합니다. 다음을 수행 할 수 있습니다.

.nav > li:hover {
    background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
    color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
    color: black; /*dropdown item text color*/
}

---

I'm not sure about the issue for making the top level anchor element a clickable anchor but here's the simplest solution for making desktop views have the hover effect, and mobile views maintaining their click-ability.

// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
    // Enable menu hover for bootstrap
    // dropdown menus
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

This way the mobile menu still behaves as it should, while the desktop menu will expand on hover instead of on a click.

---

An alternative solution is just to remove the 'dropdown-toggle' class from the anchor. After this clicking will no longer trigger the dropwon.js, so you may want to have the submenu to show on hover.

---

You could use a javascript snippit

$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});

That will unbind the click event preventing url changing.

---

Here's a little hack that switched from data-hover to data-toggle depending the screen width:

/**
 * Bootstrap nav menu hack
 */
$(window).on('load', function () {
    // On page load
    if ($(window).width() < 768) {
        $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
    }

    // On window resize
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
        } else {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
        }
    });
});

---

This can be done simpler by adding two links, one with text and href and one with the dropdown and caret:

<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
    <li><a href="{{route('posts.create')}}">Create</a></li>
</ul>

Now you click the caret for dropdown and the link as a link. No css or js needed. I use Bootstrap 4 4.0.0-alpha.6, defining the caret is not necessary, it appears without the html.

참고URL : https://stackoverflow.com/questions/12630188/allow-click-on-twitter-bootstrap-dropdown-toggle-link