프로그래밍 방식으로 부트 스트랩 드롭 다운을 여는 방법

프로그래밍 방식으로 부트 스트랩 드롭 다운을 여는 방법

---

다른 드롭 다운 항목을 클릭 할 때 Bootstrap 드롭 다운을 열려고합니다.

아이디어는 첫 번째 드롭 다운에서 도시를 선택하는 것입니다. 그러면 스크립트가 영역이있는 두 번째 드롭 다운을 자동으로 열고 선택한 도시에 해당하는 영역 만 표시합니다.

내 JS는 다음과 같습니다.

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').dropdown('toggle');
});

그리고 이것은 HTML입니다.

<div class="dropdown form-control">
   <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div>           
   <input type="hidden" name="advanced_city" value="jersey-city">
   <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities">
      <li role="presentation" data-value="">All Cities</li>
      <li role="presentation" data-value="jersey-city">Jersey City</li>
      <li role="presentation" data-value="london">London</li>
      <li role="presentation" data-value="new-york">New York</li>
   </ul>        
   </div>
</div>

<div class="dropdown form-control">
    <div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div>           
        <input type="hidden" name="advanced_area" value="">
           <ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas">
               <li role="presentation" data-value="">All Areas</li>
               <li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li>
               <li role="presentation" data-value="greenville" data-parentcity="">Greenville</li>
               <li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li>
               <li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li>

                  .....
           </ul>        
        </div>    
</div>

---

가장 좋은 방법은 드롭 다운이 아직 열려 있지 않은지 확인한 다음을 사용하는 것 .dropdown('toggle')입니다.

주의해야 할 몇 가지 사항 :

• 다른 요소를 클릭하여 트리거 하려면 다른 요소 에서 클릭 이벤트를 종료해야합니다. 그렇지 않으면 부트 스트랩이 드롭 다운 외부의 클릭으로 처리하고 즉시 닫습니다.
• $('.dropdown').addClass('open')$('.dropdown-toggle').dropdown('toggle')구성 요소를 클릭하면 드롭 다운이 닫히지 않고 영구적으로 열려 있기 때문에 다른 답변에서 제안한대로 좋은 대체품이 아닙니다 .

HTML :

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
  </button>
  <div class="dropdown-menu">
  Stuff...
  </div>
</div>

JS :

$('.trigger_button').click(function(e){
  // Kill click event:
  e.stopPropagation();
  // Toggle dropdown if not already visible:
  if ($('.dropdown').find('.dropdown-menu').is(":hidden")){
    $('.dropdown-toggle').dropdown('toggle');
  }
});

바이올린 예

---

Bootstrap 3의 경우 드롭 다운 태그에 'open'클래스를 추가하기 만하면됩니다. 제거하면 드롭 다운이 닫힙니다.

$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

이것은 다른 버전에서 작동 할 수 있지만 확실하지 않습니다.

---

부트 스트랩의 드롭 다운 플러그인은 메뉴를 표시하기 위해 'click.bs.dropdown'이벤트를 기다립니다. 따라서이 경우 :

$('#sidebar_filter_areas').trigger('click.bs.dropdown');

작동해야합니다. 동일한 요소가있는 경우 다른 '클릭'이벤트를 트리거하지 않습니다.

---

dropdown('toggle') 버튼 태그를 사용할 때 잘 작동합니다.

JS

$("#mybutton").dropdown('toggle')

HTML

<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>

---

클릭 이벤트가 상위 요소로 버블 링되는 것을 중지해야합니다.

$('#sidebar_filter_city li').click(function(e){   
    $('#sidebar_filter_areas').dropdown('toggle');
    e.stopPropagation();
});

return false;동일한 작업을 수행하는 것을 사용할 수도 있지만 클릭시 Default를 방지합니다.

---

그들 중 누구도 트릭을 수행하지 않는 경우 다음과 같이 할 수 있습니다.

$('.dropdown').addClass('open'); // substitute with your own selector
$('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector

위의 방법은 작동하지만 약간 해키이므로 사용하지 않는 것이 좋습니다.

---

이것은 나를 위해 작동합니다.

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();

    $(this).parent().toggleClass('open');
});

마크 업 :

<div class="dropdown pull-right">
    <button class="btn btn-default dropdown-toggle task-actions" type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu">
    </button>
    <ul id="dropdown-overview" class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

---

단지 사용하는 .click()데이터 토글 요소를하지만, 잊지 마세요e.stopPropagation()

이 간단한 라인은 몇 시간 동안 저를 데려갔습니다. 도움이 되었기를 바랍니다. :)

---

부트 스트랩 문서 에 따르면 다음과 같이 간단히 사용할 수 있습니다.

$('.dropdown-toggle').dropdown();

---

이것을 시도하십시오 : $ ( '# sidebar_filter_areas'). click ();

---

대부분의 경우 수동 작업으로 작동합니다.

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').click();
});

---

열린 드롭 다운 메뉴를 살펴보면 드롭 다운 메뉴의 표시를 변경하는 선택기를 볼 수 있습니다. 부트 스트랩 v3.0.0에서 CSS 선택기는 다음과 같습니다.

.open > .dropdown-menu {
    display: block;
}

따라서 .dropdown-menu 클래스를 사용하여 요소의 부모 노드에 열린 클래스를 추가해야합니다. 다른 버전에서 변경된 경우 동일한 방법으로 올바른 선택기를 찾을 수 있습니다.

---

Something I like to use that has a bit more user-expected behavior:

if(!$('#myDropdown').hasClass('show')){
  $('#myDropdown').dropdown('toggle');
}

If it is already open, don't do anything. If it is closed, then it should open.

---

in Bootstrap 4.x, following components need to be effected:

• li > .nav-item .dropdown
  • a > .nav-link > aria-expanded
• div > .dropdown-menu

Adding a click event listener, which triggers toggling a class and a bool value, for those classes make dropdown work with pure javascript as follows:

let status = false
const nav = document.getElementsByClassName('nav-item dropdown')[0]
nav.addEventListener('click', toggleDropdown)
function toggleDropdown () {
   if (status) {
      nav.classList.add('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.add('show')
   } else {
      nav.classList.remove('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.remove('show')
   }
   return status = !status
}

---

For Bootstrap 4 using Anuglar 6 i used this:

<div class="dropdown-menu" id='logoutDropDownMenu' x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">

My component ts file has this function

 import { DOCUMENT } from '@angular/common';
 import { Inject } from '@angular/core';

export class HomeComponent implements OnInit {

  private toggleLogout: boolean;

  constructor(@Inject(DOCUMENT) private document: any){}


 toggleButton() {
    if (this.toggleLogout) {
      this.document.getElementById('logoutDropDownMenu').classList.add('show');
    } else {
      this.document.getElementById('logoutDropDownMenu').classList.remove('show');
    }
    this.toggleLogout = !this.toggleLogout;

  }

---

You can achieve the same thing using Native JavaScript like this:

 document.getElementById('XYZ').click('open');

It works on all browsers.

ReferenceURL : https://stackoverflow.com/questions/22842903/how-to-open-bootstrap-dropdown-programmatically