jquery隐藏和显示链接无法正常工作

时间:2015-05-14 16:43:24

标签: jquery html

它没有显示能够在图例和地图之间切换的标题(显示图例)。这适用于jQuery 1.8.3,但之后的任何版本都不起作用。任何人都可以帮忙吗?

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>


  <style type="text/css">
    .maplegend {
    display:none;
}
  </style>



<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    $(".legend").hide();
    $(".maplegend").show();

    $('.maplegend').toggle(function () {
        $("#plus").text("Show Legend");
        $(".legend").show();
        $(".map").hide();

    }, function () {
        $("#plus").text("Show Map");
        $(".legend").hide();
        $(".map").show();
    });

});
});//]]>  

</script>


</head>
<body>
  <a href="#" class="maplegend" id="plus" style="display: none;">Show Legend</a>

<div class="legend" style="display: none;">legend</div>
<div class="map">map</div>



</body></html>

2 个答案:

答案 0 :(得分:0)

您没有正确使用toggle。这不是一个事件,它是一个切换可见性开/关的指令。你可能正在寻找类似的东西:

$(document).ready(function () {
    var isLegendVisible = false;
    $(".legend").hide();
    $(".maplegend").show();

    $('.maplegend').on('click', function () {
        if(isLegendVisible) {
            $("#plus").text("Show Map");
            $(".legend").hide();
            $(".map").show();
        }
        else {
            $("#plus").text("Show Legend");
            $(".legend").show();
            $(".map").hide();
        }
        isLegendVisible = ! isLegendVisible;
    });
});

PS:如果你还想使用它,这里是toggle documentation的链接。

答案 1 :(得分:0)

看这个:)

$(".legend").css("visibility", "visible");
$(".legend").css("visibility", "hidden");