bootstrap下拉菜单的实现的二种方法及无法隐藏的问题

潘先生 日期:2017-08-20

bootstrap下拉菜单的实现的二种方法及无法隐藏的问题

1,bootstrap标签指定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="#">Java</a>

        </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="#">Java</a>

        </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">test</button>

</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="#">Java</a>

        </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">test</button>

<button id="test1">test1</button>

</div>

</body>

<script>

    $(function() {

        $("#test").click(function() {

            $(".dropdown-menu").slideUp();

        })

        $("#test1").click(function() {

            $(".dropdown-menu").slideDown();

        })

    })

</script>


如果感觉速度有点慢?可以通过参数调节速度甚至还有回调函数来替代$(selector).on("hidden.bs.dropdown', function () {})(对下拉菜单收回时间的监听)。

$(selector).slideUp(speed,callback)


speed 可选。规定元素从可见到隐藏的速度(或者相反)。默认为 “normal”。 可能的值: 

毫秒 (比如 1500)

“slow”

“normal”

“fast” 

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度(这样会创造滑动效果)。

callback 

可选。slideUp 函数执行完之后,要执行的函数。 除非设置了 speed 参数,否则不能设置该参数。

关键词: 下拉菜单,

属分类: HtmlCssJs

1 0
网圵:http://127.0.0.13/Article/show/i/497.html

上一篇:jquery之each()使用方法

下一篇: 没有了

留言:
登录  注册
三思而后言,谢谢。