boottstrap 드 롭 다운 메뉴 에서 숨 길 수 없 는 문 제 를 해결 합 니 다.

드 롭 다운 메뉴 의 두 가지 실현
boottstrap 은 드 롭 다운 메뉴 의 구성 요 소 를 제공 하고 공식 적 으로 도 두 가지 사용 방법 을 제공 합 니 다. 1. 태그 지정 data - toggle

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">  
        <span class="caret">span>
    button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Javaa>
        li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">    a>
        li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">    /  a>
        li>
        <li role="presentation" class="divider">li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">     a>
        li>
    ul>
div>

2. js 호출 dropdown ('toggle') 방법

<div class="dropdown">
    <a href="#" class="dropdown-toggle" id="dropdownMenu1" >
          
        <span class="caret">span>
    a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Javaa>
        li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">    a>
        li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">    /  a>
        li>
    ul>
<button id="test">testbutton>
div>
body>

<script>
    $(function() {
        $("#test").click(function() {
            $(".dropdown-toggle").dropdown('toggle');
        })
    })
script>

두 번 째 방법 은 심각 한 문제 가 있 습 니 다.
바로 드 롭 다운 메뉴 가 열 린 후 공식 적 으로 숨 기 는 방법 을 제공 하지 않 았 고 인터넷 의 방법 은 dropdown ('toggle') 을 다시 호출 하 는 것 이 라 고 죽 어 라 말 했다.어차피 난 안 돼.그럼 클릭 한 외부 로 드 롭 다운 메뉴 를 열 고 싶 은 데 요?(JS 로 제어 해 야 합 니 다) jQuery 가 제공 하 는 효과 slideUp (), slideDown () 을 사용 하 는 방법 이 생각 났 습 니 다.

<body>
<div class="dropdown">
    <a href="#" class="dropdown-toggle" id="dropdownMenu1" >
          
        <span class="caret">span>
    a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Javaa>
        li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">    a>
        li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">    /  a>
        li>
        <li role="presentation" class="divider">li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">     a>
        li>
    ul>
<button id="test">testbutton>
<button id="test1">test1button>
div>
body>
<script>
    $(function() {
        $("#test").click(function() {
            $(".dropdown-menu").slideUp();
        })
        $("#test1").click(function() {
            $(".dropdown-menu").slideDown();
        })
    })
script>

자, 이제 열 리 고 닫 을 수 있 는데 속도 가 좀 느 려 요?괜 찮 습 니 다 slide 는 매개 변수 로 속 도 를 조절 할 수 있 고 심지어 리 셋 함수 로 대체 할 수 있 습 니 다 $(selector).on("hidden.bs.dropdown', function () {}) (드 롭 다운 메뉴 회수 시간 에 대한 감청). 만점!$(selector).slideUp(speed,callback)

speed 선택 가능.숨겨 진 속 도 를 볼 수 있 도록 요 소 를 규정 합 니 다 (또는 반대).기본 값 은 'normal' 입 니 다.가능 한 값:

밀리초 (예 를 들 어 1500)

“slow”

“normal”

'fast' 는 속 도 를 설정 하 는 상황 에서 요 소 는 숨겨 진 것 을 볼 수 있 는 과정 에서 그 높이 를 점차적으로 변화 시킨다 (이렇게 하면 미끄럼 효 과 를 창조 할 수 있다).

콜 백 을 선택 할 수 있 습 니 다.slideUp 함수 가 실 행 된 후 실행 할 함수 입 니 다.speed 인 자 를 설정 하지 않 으 면 이 인 자 를 설정 할 수 없습니다.

boottstrap 드 롭 다운 메뉴 에서 숨 길 수 없 는 문 제 를 해결 합 니 다.

좋은 웹페이지 즐겨찾기