Bootstrap 3 - 按钮下拉菜单不适用于iPhone

时间:2015-08-06 12:05:21

标签: javascript c# iphone drop-down-menu twitter-bootstrap-3

我一直在寻找解决这个问题的互联网,显然它应该在Bootstrap 3中得到修复。但是,它不是。

基本上,在我正在开发的网站上,我们有几个下拉按钮,在网站上形成一个搜索面板。在桌面和其他设备上,当用户单击某个字段时,会生成一个菜单,允许他们进行选择。这在桌面和Android上完美运行,但在Iphone上(在iPhone 5上测试)菜单会触发一次,但根本不会触发其他菜单。

Tour Finder

我为每个部分使用的代码如下(还有一些剃刀代码,但只是假设输出选项):

<div class="col-lg-5ths col-sm-3" id="tour-type-selection">
                    <div class="form-group">
                        <button type="button" placeholder="@(Umbraco.GetDictionaryValue("Tourfinder.Display.Type"))" class=" btn btn-default tf_option tour_finder" data-toggle="dropdown" data-text="@(Umbraco.GetDictionaryValue("TourFinder.Display.Type"))" aria-haspopup="true" aria-expanded="false" data-inactive="fa-arrow-circle-down" data-active="fa-check">
                            <i class="fa @(type.Count() > 0 ? "fa-check greenTick" : "fa-arrow-circle-down") pull-right"></i>
                            @Umbraco.GetDictionaryValue("TourFinder.Display.Type")
                        </button>

                        <div class="dropdown-menu tourtype-menu">
                            <div class="col-sm-6">
                                <label class="checkbox-inline"><input type="checkbox" name="Trip_Type" @(type.Contains("0") ? "checked='checked'" : string.Empty) value="0">All Tours</label>
                            </div>
                            @foreach (IPublishedContent item in categories)
                            {
                                var value = item.GetPropertyValue<string>("categoryId");
                                <div class="col-sm-6">
                                    <label class="checkbox-inline"><input type="checkbox" name="Trip_Type" @(type.Contains(value) ? "checked='checked'" : string.Empty) value="@value" />@item.Name</label>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <div class="col-lg-5ths col-sm-3" id="tour-date-selection">
                    <div class="form-group">
                        <button type="button" placeholder="@(Umbraco.GetDictionaryValue("TourFinder.Display.Date"))" class="btn btn-default tf_option tour_finder" data-toggle="dropdown" data-text="@(Umbraco.GetDictionaryValue("TourFinder.Display.Date"))" aria-haspopup="true" aria-expanded="false" data-inactive="fa-calendar" data-active="fa-check"><i class="fa @(startDate != string.Empty && endDate != string.Empty ? "fa-check greenTick" : "fa-calendar") pull-right"></i>@(Umbraco.GetDictionaryValue("TourFinder.Display.Date"))</button>
                        <div class="dropdown-menu datepicker-menu">
                            <div class="form-group col-sm-12 col-xs-6">
                                <label for="dateFrom" class="">@Umbraco.GetDictionaryValue("TourFinder.Display.DateFrom")</label>
                                <input type="text" name="Date_From" id="dateFrom" title="Eg. yyyy/MM/dd" class="form-control" autocomplete="off" @(startDate != string.Empty ? "value=" + startDate : string.Empty) />
                            </div>
                            <div class="form-group col-sm-12 col-xs-6">
                                <label for="dateTo" class="">@Umbraco.GetDictionaryValue("TourFinder.Display.DateTo")</label>
                                <input type="text" name="Date_To" id="dateTo" class="form-control" autocomplete="off" @(endDate != string.Empty ? "value=" + endDate : string.Empty) />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5ths col-sm-3" id="tour-duration-selection">
                    <div class="form-group">
                        <button type="button" placeholder="@Umbraco.GetDictionaryValue("TourFinder.Display.Duration") " class="btn btn-default tf_option tour_finder" data-toggle="dropdown" data-text="@Umbraco.GetDictionaryValue("TourFinder.Display.Duration")" aria-haspopup="true" aria-expanded="false" data-inactive="fa-clock-o">
                            <i class="fa @(duration.Count() > 0 ? "fa-check greenTick" : "fa-clock-o") pull-right"></i>@Umbraco.GetDictionaryValue("TourFinder.Display.Duration")
                        </button>

                        <div class="dropdown-menu tourduration-menu">
                                <div class="col-xs-6 col-sm-12">
                                    <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("1") ? "checked='checked'" : string.Empty) name="Trip_Duration" value="1" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.DayTours")</label>
                                </div>
                                <div class="col-xs-6 col-sm-12">
                                    <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("2") ? "checked='checked'" : string.Empty) name="Trip_Duration" value="2" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.2-3Days")</label>
                                </div>
                                <div class="col-xs-6 col-sm-12">   
                                     <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("3") ? "checked='checked'" : string.Empty) name="Trip_Duration" value="3" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.4-6Days")</label>
                                </div>
                                <div class="col-xs-6 col-sm-12">
                                    <label class="checkbox-inline"><input type="checkbox" @(duration.Contains("4") ? "checked='checked'" : string.Empty)  name="Trip_Duration" value="4" />@Umbraco.GetDictionaryValue("TourFinder.Value.Duration.7+Days")</label>
                                </div>

                        </div>
                   </div>
                </div> 

正如您所看到的,我只是使用标准的引导代码来实现下拉,所以任何人都可以解释为什么这不适用于IPhone,因为我已经安装了整个Bootstrap库:

http://getbootstrap.com/components/#btn-dropdowns

有问题的网站可以在这里找到:

http://icelandmountainguides.axumdev.com

NB。我已尝试在此线程中为Bootstrap 2描述的touchstart修复,但这似乎没有做任何事情

Why doesn't Bootstrap button dropdown work on iOS?

0 个答案:

没有答案