javascript - 如何在左侧添加一个 div 并且仅在单击鼠标时显示？

Question

如何在左侧添加一个 div 并且仅在鼠标单击黄色部分时才会显示？这是代码：http: //jsfiddle.net/r6p7E/18/

events: {
         mouseOut: function () {
             var serie = this.points;

             $.each(serie, function (i, e) {
                 if (!this.selected) {
                     this.graphic.attr({
                         fill: '#242c4a'
                     });
                 } else {
                     this.graphic.attr({
                         fill: '#fefe0f',
                     });
                 }
              });
          }, 

          click: function(event) {

          }
       }

Answer 1

您可以尝试以下方法：

jQuery：（只是示例部分，完整代码请参考 Demo）

click: function(event) {
    //alert("ok");
    $('#testDiv').show();
}

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="testDiv" style="height: 400px;">Sample Left Div</div> <!-- Added this -->
<div id="container" style="height: 400px"></div>

CSS：（在同一行显示两个 div 并在加载时隐藏左 div）

div {
    display: inline;
}
#testDiv{
    display: none;
}

更新的演示

Answer 2

为内容添加一个隐藏的容器

<div id="content" style="display:none;"></div>

在您的点击事件中执行以下操作

click: function(event) {
    if(event.point.selected){
        $("#content").hide();
    }else{
        $("#content").show();
        $("#content").html(event.point.name)
    }
}

jsfiddle 示例显示选择了女巫内容