JQuery показать / скрыть / переключить и т. д. - PullRequest
Новая
       22

JQuery показать / скрыть / переключить и т. д.

1 голос
/ 12 июня 2010

Jquery: 

$("li h2").click(function() {
    $(this).toggleClass("active").siblings().removeClass("active");
    $(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});

HTML: 

<ul>
    <li>
        <h2>headingA</h2>
        <div>contentA</div>
        <h2>headingB</h2>
        <div>contentB</div>
    </li>
</ul>

ПРИМЕЧАНИЯ: В сущности, я бы хотел: при нажатии на h2 показывать div рядом с ним и скрывать все остальные, а не только показывать / скрывать переключатели. спасибо!

1 Ответ

1 голос
/ 12 июня 2010

Ну, вот вам ваше решение.В прямом смысле.Я не внес никаких изменений в ваш код, за исключением добавления небольшой раскраски CSS.

РЕДАКТИРОВАТЬ: Я изменил его для запуска после загрузки DOM.

CSS

.active {
    background: yellow;
}

div {
    background: orange;
}

HTML 

<ul>
    <li>
        <h2>headingA</h2>
        <div>contentA</div>
        <h2>headingB</h2>
        <div>contentB</div>
        <h2>headingC</h2>
        <div>contentC</div>
    </li>
</ul>​

jQuery 

   // Remember to wrap your code to run after the DOM is loaded.
$(function() {
    $("li div").hide();
    $("li div:first").show(); 
    $("li h2:first").addClass("active");

    $("li h2").click(function() {
        $(this).toggleClass("active").siblings().removeClass("active");
        $(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
    });​
});
...