Итак, я делаю это там, где у них есть несколько кнопок, и когда его щелкают, он делает скрытый DIV с содержимым невидимым, это то, что у меня есть:
HTML
<div id="disArea"> <!--The toggled Dac diplays in this area.-->
<div class="Dac 1">
<p>Dac 1/p>
</div>
<div class="Dac 2">
<p>Dac 2/p>
</div>
<div class="Dac 3">
<p>Dac 3/p>
</div>
<div class="Dac 4">
<p>Dac 4/p>
</div>
<div class="Dac 5">
<p>Dac 5/p>
</div>
</div>
<div class="ibox" onclick="disToggle('.1')">Button 1 (Displays the Dac 1)</div>
<div class="ibox" onclick="disToggle('.2')">Button 2 (Displays the Dac 2)</div>
<div class="ibox" onclick="disToggle('.3')">Button 3 (Displays the Dac 3)</div>
<div class="ibox" onclick="disToggle('.4')">Button 4 (Displays the Dac 4)</div>
<div class="ibox" onclick="disToggle('.5')">Button 5 (Displays the Dac 5)</div>
Помните, что div с классом "Dac" скрыт, пока jQuery не выполнит следующее (ну, вот что я хочу делать, но это не так):
jQuery/JavaScript
function disToggle(DacNumClass)
{
$("ibox").click(function()
{
$(DacNumClass).toggle();
});
}
Я сделал это, используя функцию JavaScript с аргументом, аргумент вызывает Id или класс, который мне нужен .toggle()
. Это может быть полная неправильная идея, поправьте меня, если я ошибаюсь. Как это работает, Dac имеет класс чисел вместе с ним, а аргумент функции - класс, например divToggle()
И у меня наконец мой CSS, не уверен, что это вообще важно, но вот оно:
CSS
#disArea {
width: 300px;
height: 300px;
margin-right: auto;
margin-left: auto;
background: green;
}
.Dac {
display: none;
}
.ibox {
background: red;
display: block;
width: 125px;
height: 125px;
margin: 5px;
}
Кажется, он не переключается? что я сделал не так?
EDIT
* Исправлена связь с /p>
вместо </p>
Кроме того, возможно ли одновременно открывать только одно Dac Div?
Поскольку disToggle
сам по себе является обработчиком кликов, вы должны просто переключать целевой элемент внутри метода.
Кроме того, поскольку метод disToggle
используется как встроенный обработчик, он должен быть добавлен в глобальную область, по умолчанию jsfiddle добавит данный скрипт в оболочку window.onload=function(){...}
которая сделает метод disToggle
приватным один для обработчика onload. Вам нужно выбрать No Wrap - Body/Head
в Left Side Panel → Second Dropdown
function disToggle(DacNumClass) {
$('.Dac').not(DacNumClass).hide()
$(DacNumClass).toggle();
}
Демо: скрипка
Более jQuery-ish решение
<div class="ibox" data-target=".1">Button 1 (Displays the Dac 1)</div>
<div class="ibox" data-target=".2">Button 2 (Displays the Dac 2)</div>
<div class="ibox" data-target=".3">Button 3 (Displays the Dac 3)</div>
<div class="ibox" data-target=".4">Button 4 (Displays the Dac 4)</div>
<div class="ibox" data-target=".5">Button 5 (Displays the Dac 5)</div>
тогда
jQuery(function ($) {
var $dacs = $('.Dac');
$('.ibox').click(function () {
var target = $(this).data('target');
$dacs.not(target).hide();
$(target).toggle();
})
})
Демо: скрипка