Question

我正在尝试使用Jquery addclass和accordion向openlayers图层切换器层添加切换功能。但我无法找到错误，因为没有在文档准备好的情况下添加类。我是JQuery和openlayers的新手，无法理解我所犯的错误。我可以在中心布局中查看地图，在西窗格中查看图层切换器。但是我的手风琴，我的plusminus符号，切换效果，addClass都不起作用。有人评论......？

var map;
	 function init() {

	    map = new OpenLayers.Map({
	        div: "mapPanel",

	        numZoomLevels:31,
	        controls:[]
	    });


	    var osm = new OpenLayers.Layer.OSM(
	   			  'OpenStreetMap Layer'
								);
	    var wms = new OpenLayers.Layer.WMS('OpenLayers WMS',    	    								'http://vmap0.tiles.osgeo.org/wms/vmap0',
	   	{layers: 'basic'},
	   	{});
	   
	    map.addLayers([osm,wms]);
	
	    map.addControl(new OpenLayers.Control.Navigation());
     	map.addControl(new OpenLayers.Control.LayerSwitcher({
  				div: document.getElementById('layer_switcher_control')}));
     			map.zoomToMaxExtent();

  }

$(document).ready(function () {
	$('body').layout({ applyDemoStyles: true }); 

	  $(".baseLbl,.dataLbl").addClass("accordion_head").append('<span class="plusminus">'+"+"+'</span>');
		$(".baseLayersDiv,.dataLayersDiv").addClass("accordion_body").css({"display":"none"});
		$( ".olButton" ).wrapAll( "<p class='p_inputs' />");
	


  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    				if ($('.accordion_body').is(':visible')) {
						      $(".accordion_body").slideUp(300);
						      $(".plusminus").text('+');
						    }
   					if ($(this).next(".accordion_body").is(':visible')) {
      						  $(this).next(".accordion_body").slideUp(300);
     						  $(this).children(".plusminus").text('+');
   				  } else {
					    $(this).next(".accordion_body").slideDown(300);
					    $(this).children(".plusminus").text('-');
				  }
  });
});

#layout-west {

	background-color: #333 !important; 
	padding: 5px !important;
}

#layer_switcher_control {
	  border:1px solid #fff;
	  padding:2px;
	}

#layer_switcher_control .baseLbl {
  background-color: skyblue;
  color: #000;
  cursor: pointer;
  font-family: Georgia;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
  font-variant: small-caps;
}

#layer_switcher_control .baseLayersDiv .labelSpan {
font-family: Georgia;
font-variant: small-caps;
}

#layer_switcher_control .baseLayersDiv {
   background: #888888;
   padding-top: 5px;
   color: white;
   padding-bottom: 10px;
}


.plusminus {
  float: right;
}
	

	a{
        text-decoration: none;
      }

      label{
 	cursor:pointer;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/layout-default.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/lib/OpenLayers.js"></script>
<body onload="init(); ">
	
   	<div id = "layout-west" class="ui-layout-west">
			<div id="layer_switcher_control" class="accordion_container"></div><!--layer switcher-->
	</div>
	
 <div class="ui-layout-center">
		<div style="width:100%; height:100%" id="mapPanel"></div>
	</div>
</body>

JQuery .addClass不会添加类或创建编码元素，也不会出错

0 个答案: