Jump to content

Show/Hide Div


Lincky
 Share

Recommended Posts

Всем привет!

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

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

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

Link to comment
Share on other sites

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

<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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy