1

http://jsfiddle.net/cwNQu/5/ - Highcharts 呼び出しあり http://jsfiddle.net/cwNQu/6/ - Highcharts 呼び出しなし

iPad では、[ユーザー] をタップするとドロップダウンが表示されますが、ドロップダウンが表示された後にドロップダウン内のリンクをクリックしようとすると、ドロップダウンが閉じてしまいます。

Highchart コードを削除すると、ドロップダウンとリンクが正しく機能します。

Highcharts の何が CSS ドロップダウンを妨害する可能性があるのか​​、私は本当に途方に暮れています。どんなアイデアでも大歓迎です。

チャート コードは、Highcharts の例の 1 つから取られたものです。

$(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 に答える