Question

它没有显示能够在图例和地图之间切换的标题（显示图例）。这适用于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>

Answer 1

您没有正确使用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的链接。

Answer 2

看这个:)

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

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

2 个答案: