1

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]
        }]
    });
});
4

1 回答 1

0

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

$('#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 / 触摸设备。

于 2013-07-04T12:24:09.120 回答