Show/Hide Div

[Lincky]

Всем привет!

Есть такая проблема.

Необходимо скрывать див (DIV2) и менять класс у другого дива(DIV1, при клике на него, открывается DIV2) при клике в любом месте кроме этих дивов.Они не вложены друг в друга. Использовать слой типа "overflow" поверх всех остальных нельзя.

Спасибо, жду четкого решения.

[Great Rash]

1) Потрудитесь изложить проблему более понятно, из вашего описания ничего не ясно.

2) Сами что-то делать будете или можно сразу в коммерческие услуги переносить?

[s0rr0w]

Переноси в коммерческие сразу, если будут хоть какие-то потуги сделать это самому, тогда вернем обратно.

[Lincky]

Да, давно я тут не был))

<div class="filters-block vb-prop-edit vb-left-panel" id="filtersBlock">
								<div class="l-block">
									<div class="l-block-content">

										<div class="filter-item" onclick="show(this, 'displayName');">
											<div class="filter-label">
												Display Name
											</div>
											<div class="filter-action-item">
												<select class="filter-select-control"> 
													<option title="qqqqq">label.$([CCY1]).Fixings</option><option>label.$([CCY1]).FRAs</option><option>label.$([CCY1]/[CCY2]).Hourly.Spot.Fixings.cont</option><option>label.3M.INR.MIBR</option><option>label.3M.USD.SIBOR</option><option>label.Base.Metals.Community</option><option>label.Conversions.Factors</option><option>label.DJI.US.WilderHill.New.Energy.{Expiry}.(idx)</option><option>label.EEX.Futures</option><option>label.ETF's</option><option>label.Fixings</option><option>label.Forward.Starting.Swaps.Matrix</option><option>label.Future.Options.Calculator</option><option>label.FX.&MM</option><option>label.Gasoil.Swaps.(Add-on)</option><option>label.GFMS.Precious.Metals.Data</option><option>label.ICE.API.N°4</option><option>label.ICE.Canada.Canola</option><option>label.LME.Aluminium.Fwd</option><option>label.LME.Nickel.Fwd</option><option>label.LME.Tin.Fwd</option><option>label.LME.Zinc.Fwd</option><option>label.Maturity.Date</option><option>label.Metals.Producuton.Database</option><option>label.Moody's.Bank.Loan.Current</option><option>label.Principal.Currency</option><option>label.QuoteList.-.Agriculture.Cash</option><option>label.RTR.Magnes.99.9.Russ{Expiry}.(cash)</option><option>label.RTR.Molybdene.Mo3.CH{Expiry}.(cash)</option><option>label.S&P.Rtg</option><option>label.Shanghai.comp.</option><option>label.Singapore.Oil.Stats</option><option>label.Spectron.Denmark.Power</option><option>label.Spot.Rates</option><option>label.Spread</option><option>label.Spreads</option><option>label.Top.News.for.Latam</option><option>label.Treasury.Guide</option><option>label.USDA.Real-time.Stats</option><option>label.Volatilities</option><option>label.Yld.Chng</option><option>label.$([CCY1]).Crosses</option><option>label.$([CCY1]).Deposits</option><option>label.$([CCY1]).Domestic.Fixings</option><option>label.$([CCY1]).Fixing</option><option>label.$([CCY1]).FRA</option><option>label.$([CCY1]).Index.Chart</option><option>label.$([CCY1]).Interest.Rate.Fixings</option><option>label.$([CCY1]).Interest.Rate.Swaps</option><option>label.$([CCY1]).IRS</option><option>label.$([CCY1]).LIBOR</option><option>label.$([CCY1]).Murabaha</option><option>label.$([CCY1]).Murabaha.Contributed.Rates</option><option>label.$([CCY1]).Murabaha.Yield.Curve</option><option>label.$([CCY1]).NDF.Outright</option><option>label.$([CCY1]).Overnight.Index.Swaps</option><option>label.$([CCY1]).Repos</option><option>label.$([CCY1]).Spot.Fixings</option><option>label.$([CCY1]).Treasury.Benchmarks</option><option>label.$([CCY1]).Yield.Curve</option><option>label.$([CCY1]/[CCY2]).1M.ATM.Option.Volatility</option><option>label.$([CCY1]/[CCY2]).ATM.Option.Volatility</option><option>label.$([CCY1]/[CCY2]).ATM.Volatilities</option><option>label.$([CCY1]/[CCY2]).Forwards</option><option>label.$([CCY1]/[CCY2]).Future.Chart</option><option>label.$([CCY1]/[CCY2]).Futures</option><option>label.$([CCY1]/[CCY2]).FX.Polls</option><option>label.$([CCY1]/[CCY2]).FX.Swaps</option><option>label.$([CCY1]/[CCY2]).Hourly.Spot.Fixings</option><option>label.$([CCY1]/[CCY2]).NDFs</option><option>label.$([CCY1]/[CCY2]).Risk.Reversals.and.Butterflies</option><option>label.$([CCY1]/[CCY2]).Spot.Chart</option><option>label.$([CCY1]/[CCY2]).Volatility.Surface</option><option>label.$inventory.DisplayName$</option><option>label.%.Chng</option><option>label.%.Price.Change.5.Days</option><option>label.10DCALL</option><option>label.10DPUT</option><option>label.10Y.AUD.T-BOND</option><option>label.10Y.CAD.T-BOND</option><option>label.10Y.JGB</option><option>label.180/380Cst.Swaps.(Add-on)</option><option>label.180Cst.Swaps.(Add-on)</option><option>label.180Cst/Brent.Swaps.(Add-on)</option><option>label.180Cst/Dubai.Swaps.(Add-on)</option><option>label.1M</option><option>label.1W</option><option>label.1Y</option><option>label.25DCALL</option><option>label.25DPUT</option><option>label.2M</option><option>label.2W</option><option>label.2Y</option><option>label.360.View</option><option>label.380Cst.Swaps.(Add-on)</option><option>label.3M</option><option>label.3M.$([CCY1]).Fixing.Chart</option><option>label.3M.$([CCY1]).OIS.Chart</option><option>label.3M.$([CCY1]).STIR.Future.Chart</option><option>label.3M.$([CCY1]).STIR.Future.Options</option><option>label.3M.$([CCY1]).STIR.Futures</option><option>label.3M.AUD.LIBOR</option><option>label.3M.CAD.BA</option><option>label.3M.CAD.LIBOR</option><option>label.3M.CHF.LIBOR</option><option>label.3M.CNY.SHIBOR</option><option>label.3M.DKK.CIBOR</option><option>label.3M.EURIBOR</option><option>label.3M.EURO</option><option>label.3M.EURO.$</option><option>label.3M.EURO.YEN</option><option>label.3M.Eurodollar.Futures</option><option>label.3M.GBP.LIBOR</option><option>label.3M.INR.MIBOR</option><option>label.3M.INTERBANK.RATES</option><option>label.3M.JPY.LIBOR</option><option>label.3M.NOK.NIBOR</option><option>label.3M.NZD.LIBOR</option><option>label.3M.RUB.MOSPRIME</option><option>label.3M.USD.LIBOR</option><option>label.3rd.Party.Data</option><option>label.3W</option><option>label.4M</option><option>label.5.Year.CDS.chart</option><option>label.5M</option><option>label.5Year.CDS.Index</option><option>label.5Year.Sovereign.CDS</option><option>label.6M</option><option>label.6W</option><option>label.9M</option><option>label.AAA.Ratings</option><option>label.ABN.Ambro.TR</option><option>label.ABS.and.CMOs.-.Curve.Chart</option><option>label.ABS.and.MBS.News</option><option>label.ABS.Market.Report</option><option>label.ABS.News</option><option>label.ABS.Overview</option><option>label.ABS.Ratings.News</option><option>label.ABS/MBS.Speed.Guide</option><option>label.ABX.HE.A</option><option>label.ABX.HE.AA</option><option>label.ABX.HE.AAA</option><option>label.ABX.HE.BBB</option><option>label.ABX.HE.BBB-</option><option>label.Actual.Power.Exchange</option><option>label.Adrian</option><option>label.ADRs</option><option>label.Africa</option><option>label.African.Rubber.1</option><option>label.African.Rubber.2</option><option>label.AFT.TH.Rubber.TSR20.{Expiry}.(fut)</option><option>label.Agencies.-.Curve.Chart</option><option>label.Agency.Debt.News</option><option>label.Agency.MBS.Calculator</option><option>label.Agency.Name</option><option>label.AGRICULTURE</option><option>label.Agriculture.-.Line.Chart</option><option>label.Agriculture.Alerts</option><option>label.Agriculture.Analysis.Overview</option><option>label.Agriculture.News</option><option>label.Agriculture.Shipping.News</option><option>label.Agriculture.Weather</option><option>label.Alaman.Islamic</option><option>label.Alberta.DA.Peak</option><option>label.Alberta.Day.Ahead</option><option>label.Alberta.ESO.Menu</option><option>label.Alberta.Real-time</option><option>label.All.Asia.Crudes</option><option>label.All.Broker.Real-Time.Rates</option><option>label.All.Cash.Cotton.Pricing</option><option>label.All.DTN.Weather.News</option><option>label.All.Dubai.Swaps</option><option>label.All.European.Crudes</option><option>label.All.FX.&.Money.News</option><option>label.All.Latin.America.Crudes</option><option>label.All.Money.News</option><option>label.All.Oman.(MOG)Swaps</option><option>label.All.OSP.Outrights</option><option>label.All.Quotes</option><option>label.All.Todays.FX.and.Debt.Market.Diary</option><option>label.All.Weather.News</option><option>label.Alum..Output</option><option>label.Alum..Stocks</option><option>label.Aluminium</option><option>label.Aluminium.-.Line.Chart</option><option>label.Aluminium.3-Month</option><option>label.Aluminium.News</option><option>label.Aluminium.Stocks</option><option>label.Aluminium.Technical.Analysis</option><option>label.Ammonium.Nitrate</option><option>label.Amortization.Type</option><option>label.Amount.Outstanding</option><option>label.Analyse.Swap.Points.and.Outrights</option><option>label.Analyst.Estimates.for.US.Cattle.Inventory.(biannual)</option>
												</select>
											</div>
										</div>

										<div class="filter-item" onclick="show(this, 'link');">
											<div class="filter-label">
												Link
											</div>
											<div class="filter-action-item">
												<select class="filter-select-control"> 
													<option>GzCExOV</option><option>GzCEzAGRICULTURExOV</option><option>GzCEzENERGYxOV</option><option>GzCEzMETALSxOV</option><option>GzEQxOV</option><option>GzFIxOV</option><option>GzFIzCREDINDxOV</option><option>GzFIzFUTURESxOV</option><option>GzFIzSWAPSxOV</option><option>GzFXxOV</option><option>GzMMxOV</option><option>KOxQ</option><option>KOxQLzBONDzBONDAGENCIES</option><option>KOxQLzBONDzBONDS</option><option>KOxQLzBONDzCDSINDEX</option><option>KOxQLzBONDzFRA</option><option>KOxQLzBONDzFRN</option><option>KOxQLzBONDzISLAMIC</option><option>KOxQLzBONDzSOVEREIGN</option><option>KOxQLzBONDzSWAPS</option><option>KOxQLzCAzFUTURES</option><option>KOxQLzCOMMODITYzDEFAULT</option><option>KOxQLzEQUITYzDEFAULT</option><option>KOxQLzEQUITYzRISKRETURN</option><option>KOxQLzFUzPERF</option><option>KOxQLzFXMMzCURRENCYFUTURE</option><option>KOxQLzFXMMzDEFAULT</option><option>KOxQLzFXMMzDEPOSITS</option><option>KOxQLzFXMMzFIXING</option><option>KOxQLzFXMMzFORWARD</option>
												</select>
											</div>
										</div>
</div>
</div>
</div>

<div id="propBox" class="property-wr vb-prop-edit">
	<div id="displayName" style="display:none">
		<div class="filter-item">
			<div class="filter-label">
				Inc search
			</div>
			<div class="filter-action-item">
				<input class="filter-input-control" type="text" value="label.S&P.500" />
			</div>
		</div>		
		<div class="filter-item">
			<div class="filter-label">
				Max Row
			</div>
			<div class="filter-action-item">
				<select class="filter-select-control"> 
					<option>1</option><option>2</option>
				</select>
			</div>
		</div>
	</div>
</div>

<script>
var filterItem;
function show(_obj, _id) {
	var myArray = new Array();
	if (filterItem) {
		filterItem.className='filter-item';
	}
	_obj.className = 'filter-item filter-item-hover';
	filterItem = _obj;
	propertyBox = document.getElementById('propBox');
	propertyBoxItem = document.getElementById(_id);		
	propertyBox.style.display = 'block';
	for (i = 0; i < propertyBox.childNodes.length; i++ ){
		if(propertyBox.childNodes[i].tagName == 'DIV'){
			myArray.push(propertyBox.childNodes[i]);
		}
	}
	for(i = 0; i < myArray.length; i++) {
	   myArray[i].style.display = 'none';
	}
	propertyBoxItem.style.display = 'block';
	propertyBox.style.left = _obj.offsetWidth + _obj.offsetLeft - 2 + 'px';
	propertyBox.style.height = document.getElementById('filtersBlock').offsetHeight - 5 + 'px';
}

</script>

Вот часть кода. Я просто не знаю как вычислять положение курсора, если он находится на нужном диве, клик игнорить, иначе закрывать и у DIV1 менять класс.

<style>
		.dijit-dialog-wr2 {*zoom:1;}
		.vb-prop-edit .filter-select-control {width:220px;}
		.vb-prop-edit .filter-input-control {width:210px;}
		.vb-prop-edit .filter-item {display:block;}
		.vb-left-panel {float:left;width:240px;}
		.vb-right-panel {margin-left:245px;*zoom:1;}
		.vb-scroll {height:350px;overflow:auto;margin-bottom:5px;}
		.vb-prop .greenBlockMenu {margin-bottom:5px;}
		.vp-header-action {position:absolute;right:3px;top:8px;}
		.vp-header-action-item {padding-left:5px;}
		.filter-item {margin:0; padding:4px 6px 6px;}
		.filter-item-hover {position:relative; z-index:200; border:1px solid #666; border-width:2px 0 2px 2px; padding:2px 6px 4px 4px; background:#fefefe;}
		.property-wr {top:83px; position:absolute; display:none; border:2px solid #666; background:#fefefe; _width:240px; }
	</style>

вот css

[Great Rash]

Я просто не знаю как вычислять положение курсора, если он находится на нужном диве, клик игнорить, иначе закрывать и у DIV1 менять класс.

Снова ничего не понятно. Что вам нужно по шагам можете описать?

[mishka]

Тупой копипаст кода это не попытка сделать чтото самому.

Вероятность того что ктото возьмется за эту задачу прямопропорционально стремится к нулю, онтносительно того сколько километров кода вы выложили.

При виде такого колличества скопированного откудато кода отпадает все желание его смотреть.

А в условии речь идет всего то о двух дивах. Так потрудитесь набросать маленький код, что бы смоделировать вашу ситуацию. Дайте читаемые классы или айдишники элементам, и скажите: - "Если кликнуть туда, то должно произойти то, а потом если кликнуть сюда, то происходит это"

Таким образом сэкономите много времени.

[stars]

1) У вас у самого есть желание хоть что-то делать или вы готовы заплатить?

2) Ваше описание очень расплывчатое взять хотя бы "Использовать слой типа "overflow" поверх всех остальных нельзя." нарисуйте схематично что вы хотите...