Question

我试图在窗口获得＆gt; 490时删除jquery事件。但是，当窗口小于490px时，unblind（）或off（）元素不会停用激活的操作。为什么是这样？有没有人知道任何使选择返回其原始状态的方法？

<div id="mapdiv"></div>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());

epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

var lonLat = new OpenLayers.LonLat( 13.0161, 22.2845 ).transform(epsg4326, projectTo);

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var cmark = [13.0161, 22.2845];
markers.addMarker(new OpenLayers.Marker(lonLat));      

var zoom=8;
map.setCenter (lonLat, zoom);

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

// Define an array. This could be done in a seperate js file.
// This tidy formatted section could even be generated by a server-side script (jsonp)
var markers = [
   [ 73.0161, 26.2845 ],
   [ -0.1244324, 51.5006728 ],
   [ -0.119623, 51.503308 ]
];

//Loop through the markers array
for (var i=0; i<markers.length; i++) {

   var lon = markers[i][0];
   var lat = markers[i][1];

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( lon, lat ).transform(epsg4326, projectTo),
            {description: "marker number " + i} ,
            {externalGraphic: 'marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );             
    vectorLayer.addFeatures(feature);
}                        
map.addLayer(vectorLayer);
</script>

Answer 1

以下是您可以实现所需的方法，以下代码将根据屏幕大小解除隐藏事件的绑定。

$(document).ready(function()
{
var eventPresent = false;
$(window).resize(function()
{
 console.log("current width : ", $(window).width());
 
if ($(window).width()<490 && eventPresent == false) 
{ 
 $("#shown").unbind().click(function(event)
 {
   event.preventDefault();   
   $("#divText").toggle('hide');
 });
 eventPresent  = true;
}    
else if ($(window).width()>=490 && eventPresent == true) 
{            
   $("#shown").unbind();
   $("#divText").show()  
   eventPresent = false;     
 }
  });
});

 <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

 <a id="shown">click me to hide text</a>
   
<div id="divText">
                
You can not toggle me if screen is more than 490 px wide
         
</div>

P.S以整页模式运行代码段。

如何在窗口调整大小时取消绑定/关闭jQuery事件

1 个答案: