Question

http://jsfiddle.net/cwNQu/5/ - 使用Highcharts电话 http://jsfiddle.net/cwNQu/6/ - 没有Highcharts电话

在iPad上，您可以点按“用户”，系统会显示下拉菜单，但是在显示下拉链接后点击链接中的任何链接都只会关闭下拉列表。

如果您删除了Highchart代码，则下拉列表和链接将正常运行。

我真的不知道Highcharts可能会干扰CSS下拉。任何想法都会非常感激。

图表代码取自Highcharts示例之一：

$(function () {
    $('#chart').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            labels: {
                formatter: function() {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000 +'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
        }, {
            name: 'USSR/Russia',
            data: [null, null, null, null, null, null, null , null , null ,null,
            5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
            4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
            15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
            33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
            35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
            21000, 20000, 19000, 18000, 18000, 17000, 16000]
        }]
    });
});

Answer 1

我准备了一个示例，它使用一些不同的解决方案来显示/隐藏菜单并捕获点击事件。

$('#menu li.first').click(function(e){
e.preventDefault();
var $siblings = $(this).siblings('li'); 

if($siblings.is(':visible'))
    $siblings.hide();
else
    $siblings.show();

$('#menu li a').click(function(e){
    e.preventDefault();
     $('#info').text($(this).text());
});

}）;

http://jsfiddle.net/cwNQu/12/

但适用于iPad /触摸设备。

iPad - Highcharts会干扰下拉列表中的链接

1 个答案: