Html 点击前失去焦点

我试图使我的下拉搜索消失时，它失去重点。但是，只能关注输入元素。所以我有一个问题，如果我点击下拉元素，元素会在点击之前隐藏

<div class="col-md-8 col-md-offset-2">
    <p class="text-center white-text">Browse our course library to see a full list of lessons included in each course. Be sure to check back frequently as new lessons are added regularly.</p>
    <div class="form-group course-search" dropdown>
        <label class="sr-only white-text" for="searchFaqs">Search Courses</label>
        <input class="form-control" ng-focus="focus = true" ng-blur="focus = false"  type="search" ng-model="searchCourses" placeholder="Enter a Search Term" ng-change="searchQuery(searchCourses)">
        <div class="btn-group">
            <ul role="menu" ng-show="focus && (courseResults || episodeResults)" dropdown-menu ng-click="focus=true">
                <li ng-repeat="course in courseResults">
                    <a class="btn btn-dropdown" ui-sref="categories.course({ courseid: course.id })">
                        <span class="icon-right-open-big"></span>
                        <h3 ng-bind-html="course.name"></h3>
                        <div ng-if="course.context" ng-bind-html="course.context" class="context"></div>
                    </a>
                </li>
                <li ng-repeat="episode in episodeResults">
                    <a class="btn btn-dropdown" ui-sref="categories.course.episode({ courseid: course.id, episodeid: episode.id })">
                        <span class="icon-right-open-big"></span>
                        <h3 ng-bind-html="episode.title"></h3>
                        <div ng-if="episode.context" ng-bind-html="episode.context" class="context"></div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

浏览我们的课程库，查看每门课程中包含的课程的完整列表。在定期增加新课程时，请确保经常回头查看
搜索课程

这里也有同样的问题。运气好吗？我已经停止使用焦点了。问题是焦点只能应用于可编辑内容。我最终改变了使用我发现的指令。