>source

내 응용 프로그램에서는 닫기 버튼 사이드 부트 스트랩 드롭 다운을 추가했습니다. 해당 닫기 버튼을 클릭하면 해당 드롭 다운을 닫아야합니다. 이것은 제대로 작동하지만 드롭 다운 외부에서 아무데도 클릭 할 때 드롭 다운이 닫히지 않습니다. 여기 바이올린이 있습니다.goo.gl/3rakbw

어떤 사람이 어떻게 닫을 수 있는지 말해 줄 수 있습니까?

바이올린 링크가 없습니다

Kiran Dash2021-04-19 15:55:44

jsfiddle.net/n66mj41v/1.

vaibhav shah2021-04-19 15:55:44
  • 답변 # 1

    "show"클래스가 드롭 다운을 클릭하면 클래스가 추가되어 드롭 다운 메뉴를 숨기려면 다음을 제거해야합니다.

    $(document).on('click',function(){
        $('#user-menu').removeClass('show');
    })
    

  • 답변 # 2

    아래 jQuery code를 사용하십시오

    $(document).click( function () {
       $("#layers").css("display", "");
      });
    

    또는 사용

    $(document).click( function () {
      $("#layers").toggle();
    

    });

  • 답변 # 3

     $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
          var $target= $( event.currentTarget );
          $target.closest( '.btn-group' )
             .find( '[data-bind="label"]' ).text( $target.text() )
                .end()
             .children( '.dropdown-toggle' ).dropdown( 'toggle' );
          return false;
       });
       $(window).on('click', function () {
         $( '#layers' ).css( 'display','none' );
       });

    .btn-input {
       display: block;
    }
    .btn-input .btn.form-control {
        text-align: left;
    }
    .btn-input .btn.form-control span:first-child {
       left: 10px;
       overflow: hidden;
       position: absolute;
       right: 25px;
    }
    .btn-input .btn.form-control .caret {
       margin-top: -1px;
       position: absolute;
       right: 10px;
       top: 50%;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/><br/><br/>         <div class="panel panel-default">            <div class="panel-body">               <div class="btn-group">                 <button onclick="$('#layers').toggle();" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">                   <span data-bind="label">Select One</span>&amp;
    nbsp;<span class="caret"></span>                 </button>                 <ul id="layers" class="dropdown-menu" role="menu">                 <span><img class="close_img dropdown-toggle" onclick="$('#layers').toggle();" data-toggle="dropdown" src="https://www.eonenergy.com/images/icons/close.gif" alt="CloseWindow" title="Close" style="margin-top:5px;margin-right:5px" /></span>                   <li><a href="#">Item 1</a></li>                   <li><a href="#">Another item</a></li>                   <li><a href="#">This is a longer item that will not fit properly</a></li>                 </ul>               </div>             </div>          </div><br/><br/>

    창에서 클릭 이벤트를 설정할 수 있습니다 (창에서 아무 곳이나 클릭 만 숨기는 경우).

    $(window).on('click', function () {
         $( '#layers' ).css( 'display','none' ); //$( '#layers' ).hide();
       });
    

    나는 jsfiddle.net/n66mj41v/11과 같은 바이올린, 여전히 동일한 문제가되었습니다

    vaibhav shah2021-04-19 15:55:44

    @Vaibhavshah $ (창) .ON ( '클릭', 함수 (이벤트) {... Dhara2021-04-19 15:55:44

  • 답변 # 4

    이 작업을 시도 할 수 있습니다.

    $(document).on('click',function(){
        $('#layers').hide();
      })
    

  • 이전 python : Jupyter 노트북이 code에서 일하기에 너무 많은 시간을 할애하는 경우 어떻게해야합니까?
  • 다음 java : 복잡한 JSON 객체에서 속성을 제거하면서 반복하는 동안