bootstrap学习-下拉框

bootstrap下拉框：

官网上使用的cdn为：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

引入html页面，进入控制台发现报错：

解决方案：（注意注释文字）

<!-- jQuery文件。务必在bootstrap.min.js 之前引入，js依赖于jQuery-->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

应用：

<div class="language" >
        <!--<select class="language">-->
            <!--<option selected="selected" value="cn">中文</option>-->
            <!--<option value="English">English</option>-->
        <!--</select>-->
        <div class="dropdown" style="width: 87.63px">

            <button class="btn btn-default dropdown-toggle language-btn" type="button" id="dropdownMenu1" data-toggle="dropdown" data-close-others="false"
                    data-hover="dropdown" aria-haspopup="true" aria-expanded="true">
                <i class="glyphicon glyphicon-globe" style="font-size:14px"></i> 语言
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="width: 120px;">
                <li>
                    <span class="title" onclick="changeLanTo('cn')" style="display:flex;cursor: pointer;"><i class="country-flag country-China mr-sm"></i>中文</span>
                </li>
                <li>
                    <span class="title" onclick="changeLanTo('English')" style="display:flex;cursor: pointer;"><i class="country-flag country-UK mr-sm"></i>English</span>
                </li>
            </ul>
        </div>
    </div>

进一步应用：

将菜单点击下拉改为鼠标滑过（bootstrap-dropdown-hover插件）

应用参考文章：https://www.cnblogs.com/EnderH/archive/2016/04/09/5371712.html

此方法缺陷改进：

此点击事件出现下拉菜单之后点击切换，下拉菜单无响应：

改进方法（通过观察控制台，发现其出现时会在class标签后面添加“show”）：

 <script type="text/javascript">

		function changeLanTo(lang) {
		    // debugger;

			$("#selectlanguage").val(lang);
			//方法一：
            $("*").find(".dropdown").removeClass('show');
			$("*").find(".dropdown-menu").removeClass('show');
			方法二：
            // $(".dropdown-menu").removeClass('show');
            // $(".dropdown").removeClass('show');
		}
    </script>

参考资料

https://github.com/ibmsoft/twitter-bootstrap-hover-dropdown