jQuery переключает div, разворачивает свернуть все и сохраняет первый элемент выбранным при загрузке страницы

Question

У меня есть вопрос о некоторой функциональности, которую я пытаюсь добавить в свой jQuery, чтобы позволить кнопке или тексту расширять / сжимать все деления при нажатии ... и я хотел бы выяснить, как сохранить первый div открывается при загрузке страницы.

Вот jQuery:

(document).ready(function(){

//Hides containers on load
$(".toggle_container").hide(); 

//Switch "Open" and "Close" state on click
$("h2.trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

//Slide up and down on click
$("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow");
    });
});

и css:

// uses a background image with an on (+) and off (-) state stacked on top of each other
h2.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;}
h2.trigger a {color: #fff;text-decoration: none; display: block;}
h2.active {background-position: left bottom;}
.toggle_container { overflow: hidden; }
.toggle_container .block {padding: 20px;}

И HTML

<h2 class="trigger"><a href="#">Heading</a></h2> 
<div class="toggle_container"> 
  <div class="block">Stuff goes here</div> 
</div>

<h2 class="trigger"><a href="#">Heading 2</a></h2> 
<div class="toggle_container"> 
  <div class="block">Stuff goes here</div> 
</div>

Так что он прекрасно работает и выглядит великолепно. Однако, когда я пытаюсь сохранить первый экземпляр открытым, фоновое изображение, которое должно быть настроено, показывает состояние (-), не меняется. Код, который я использовал для этого был:

$(".toggle_container:first").show();

Итак, мой вопрос: знает ли кто-нибудь более простой способ показать первый экземпляр как открытый без необходимости создавать специальные правила / класс для первого элемента? Кроме того, есть идеи, как сделать ссылку открыть все / закрыть все?

Спасибо!

Answer 1

Вы можете изменить все ваши jQuery на это:

$(".toggle_container:not(:first)").hide(); 
$("h2.trigger:first").addClass("active");

$("h2.trigger").click(function(){
  $(this).toggleClass("active");
  $(this).next(".toggle_container").slideToggle("slow");
});

Это скрывает все, кроме первого .toggle_container, применяет class="active" к соответствующему <h2>, а toggle() просто проще, щелчок теперь переключает класс ... так что мы можем просто добавить active чтобы он совпадал с тем, что он открыт при загрузке страницы, и он будет вести себя правильно.

Кроме того, открытие / закрытие всех будет выглядеть так:

<a href="#" id="openCloseAll">Open All</a>

jQuery, как это:

$("#openCloseAll").toggle(function() {
  $(this).text("Close All");
  $(".toggle_container:hidden").prev(".trigger").click();
}, function() {
  $(this).text("Open All");
  $(".toggle_container:visible").prev(".trigger").click();
});

Это открывает все закрытые при первом щелчке, изменяет его текст, чтобы точно описать, что будет делать следующий щелчок, и закрывает все открытые при следующем щелчке, затем переключается обратно, промывается, повторяется.

Answer 2

@ user279860 Я действительно нашел ваш код полезным приятелем. Вместо того, чтобы повторять HTML для эффекта наведения, я использовал одно изображение с использованием полос CSS, и эффект, кажется, работает просто идеально.

Используя код Ника, я реструктурировал следующее:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function(){

    $(&quot;.toggle_container&quot;).hide();

    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });

});
</script>

и для CSS Я использовал следующее:

h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:arial;
font-size: 1.4em;
font-weight: bold; 
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

Таким образом, конечный HTML становится:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

Div Sections Goes here

</div>
</div>

Надеюсь, это поможет обобщить всю эту дискуссию. Спасибо Нику за то, что он все прояснил:)

Answer 3

Используйте это вместо этого - это будет работать и в IE:

$(".toggle_container:first").show(); $("h2.trigger:first").addClass("active");

Answer 4

В дополнение к тому, что написал Ник, вам также нужно будет сделать скольжение.

$("h2.trigger").click(function(){
    $(this).toggleClass("active");
    $(this).next(".toggle_container").slideToggle("slow"); // added 
});