Question

我使用以下代码设法slideDown下拉菜单。但这显然只有在单击下拉切换类时才有效。

如何整合Bootstrap的功能，当点击下拉列表中的li或点击外部时，下拉菜单消失。

$('.dropdown-toggle').click(function() {
    $(this).next('.dropdown-menu').slideToggle(500);
});

<div class="dropdown">
    <div class="dropdown-toggle" data-toggle="dropdown">Click Me</div>
    <ul class="dropdown-menu optfulwidth ulreligion">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 1

您不需要额外的CSS来打开和关闭下拉列表。

<div class="dropdown clearfix">
 <div class="dropdown-toggle" data-toggle="dropdown"><a>Click Me</a></div>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" >
  <li><a  href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a  href="#">three</a></li>

  </ul>
</div>

这是一个bootply

如果您希望它向下滑动，请添加以下

  // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
 $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
 });

Answer 2

如果你想要更详细的东西，你可以把令人敬畏的Animate.css（一个CSS动画的跨浏览器库），一些jquery，当然还有Twitter Boostrap。

在标题中：

<head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
</head>

在您要创建下拉列表的正文中：

<div class="dropdown" data-animation="slideInDown,slideOutUp,600">
            <button type="button" class="btn btn-primary" data-toggle="dropdown">Click to toggle animated dropdown <i class="caret"></i></button>
            <ul 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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

注意标记中的数据动画属性，你必须提供3个参数，动画中，动画外和持续时间。

如果你喜欢other animations，你可以玩。

在您的页脚中（或在您渲染脚本的任何位置）：

<script src="js/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {

        var $in, $out, $duration;
        $('.dropdown')
            .on('shown.bs.dropdown',
                function (e) {
                    if ($(this).attr('data-animation')) {
                        let $animations = [];
                        const $animation = $(this).data('animation');
                        $animations = $animation.split(',');
                        $in = 'animated ' + $animations[0];
                        $out = 'animated ' + $animations[1];
                        $duration = '';
                        if (!$animations[2]) {
                            $duration = 500;
                        } else {
                            $duration = $animations[2];
                        }
                        $(this).find('.dropdown-menu').removeClass($out);
                        $(this).find('.dropdown-menu').addClass($in);
                    }
                });

        $('.dropdown')
            .on('hide.bs.dropdown',
                function (e) {
                    if ($(this).attr('data-animation')) {
                        e.preventDefault();
                        const $this = $(this);
                        const $targetControl = $this.find('.dropdown-menu');

                        $targetControl.addClass($out);
                        setTimeout(function () {
                            $this.removeClass('open');
                        },
                        $duration);
                    }
                });
    })
</script>

希望这有帮助！

需要完整样本吗？

＆＃13;

        $(function () {

            var $in, $out, $duration;
            $('.dropdown')
                .on('shown.bs.dropdown',
                    function (e) {
                        if ($(this).attr('data-animation')) {
                            let $animations = [];
                            const $animation = $(this).data('animation');
                            $animations = $animation.split(',');
                            $in = 'animated ' + $animations[0];
                            $out = 'animated ' + $animations[1];
                            $duration = '';
                            if (!$animations[2]) {
                                $duration = 500;
                            } else {
                                $duration = $animations[2];
                            }
                            $(this).find('.dropdown-menu').removeClass($out);
                            $(this).find('.dropdown-menu').addClass($in);
                        }
                    });

            $('.dropdown')
                .on('hide.bs.dropdown',
                    function (e) {
                        if ($(this).attr('data-animation')) {
                            e.preventDefault();
                            const $this = $(this);
                            const $targetControl = $this.find('.dropdown-menu');

                            $targetControl.addClass($out);
                            setTimeout(function () {
                                $this.removeClass('open');
                            },
                            $duration);
                        }
                    });
        })

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

<div class="dropdown" data-animation="slideInDown,slideOutUp,600">
            <button type="button" class="btn btn-primary" data-toggle="dropdown">Click to toggle animated dropdown <i class="caret"></i></button>
            <ul 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 class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Bootstrap自定义下拉菜单

2 个答案: