Я все еще новичок в jQuery, я знаю, что мог бы "погуглить" и запустить что-то очень похожее за 5 минут, но я учусь - мне нужно сделать ошибки и спросить!
Я был уверен, что это должно сработать, но последний шаг не сработал .. Если у кого-то есть способ создать этот эффект или он знает, как очистить мой код, это будет очень цениться, но особенно если кто-то может сказать мне, гдеЯ ошибся ..
//intial load
$(document).ready(function(){
// row has been clicked
$(".fp_row").bind('click', function(){
//row id has been set to item_clicked
var item_clicked = $(this).attr('rel');
//Item_hidden is the div that shows or hides, like accordion menu
var item_hidden = $("#" + item_clicked + "_hide").attr('rel');
//hide all that are open, and then toggle the one you clicked..
$(".fp_dropdown_box").slideUp("slow", function(){
$("#" + item_hidden + "_hide").not(".fp_dropdown_box").slideToggle("slow");
});
});
});
Я создаю страницу с рядами заголовков, когда вы щелкаете по строке, выскакивает div, открывая больше информации, как аккордеон.В настоящее время я могу сделать так, чтобы окно, на которое вы нажимали, открывало, а все остальные закрывалисьЯ могу открыть все сразу и закрыть сразу. Но у меня возникают проблемы с открытием одного, затем, если вы щелкнете по нему снова, он закроется, в настоящее время он скользит вверх, а затем снова вниз.
Как я думал, кодвыше сработало .. При первоначальной загрузке, когда щелкают по строке, возьмите значение rel (которое я использую для уникального идентификатора для каждой строки), затем сдвиньте все открытые строки, но не ту, по которой вы щелкнулипри переключении слайд это ..
<!--- row --->
<div id="1_row" class="fp_row clearfix" rel="1">
<!--- time --->
<div class="fp_col fp_col_time"><p>the time</p></div>
<!--- title --->
<div class="fp_col fp_col_title"><p>the title</p></div>
</div>
<!--- hidden information --->
<div id="1_hide" rel="1" class="fp_dropdown_box clearfix" style="<cfif qEvents.event_id EQ url.event_id>display:;<cfelse>display:none</cfif>" >
<div class="fp_dropdown_content"><p>the hidden information</p></div>
</div>
Хорошо, так что после комментариев мне удалось заставить скрипт работать несколько - осталась только одна проблема - он открывается, затем закрывается дважды, прежде чем остановиться в том состоянии, в котором я его хочубыть ..
Обновленный код.
//intial load
$(document).ready(function(){
// row has been clicked
$(".fp_row").bind('click', function(){
//The Id of the clicked Row
var item_clicked = $(this).attr('rel');
console.log("The ID of the clicked Row: (" + item_clicked + ")");
//Creates variable ID for the hidden item
var item_hidden = $("#" + item_clicked + "_hide").attr('rel');
console.log("The Hidden Item ID (" + item_hidden + ")");
//Creates variable to test if the hidden item is true or false.
var item_is_hidden = $("#" + item_hidden + "_hide").css('display') == 'none';
console.log("test if hidden item is hidden (" + item_is_hidden +")");
//slide up all that are open
$(".fp_dropdown_box").slideUp("slow", function(){
//test to see if it is open: true/false
if(item_is_hidden)
{
console.log("condition worked!");
//Run the slidedown on hidden item
$("#" + item_hidden + "_hide").slideDown("slow");
}
else
{
$("#" + item_hidden + "_hide").slideUp("slow");
}
});
});
});
это мое окончательное редактирование, я думаю, что это был самый чистый способ
$(document).ready(function() {
$('div.cont > div').hide();
$('div.cont> h3').click(function() {
$(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
});
});